angular-dynamic-locale - preload locales in gulp build

angular-dynamic-locale - preload locales in gulp build.md

lgalfaso/angular-dynamic-locale#93 provides a solution for packaging angular locales with lgalfaso/angular-dynamic-locale during the build. Here's a more elaborate example using gulp.

Important steps

• Adapt gulp build (see gulpfile.js, don't forget to add gult/temp/dynamicLocalePreload.js to your test runner (e.g. karma.conf.js)
• Add dependency to dynamicLocalePreload (see yourApp.js), don't forget to remove any calls to tmhDynamicLocaleProvider.localeLocationPattern() from your code.

gulpfile.js

var fs = require('fs');
var file = require('gulp-file');

var paths = {
    scripts: 'javascript',
    index: 'index.html',
    target: 'gulp'
};

/**
 * Creates preloaded dynamic locales for angular-dynamic-locale.
 */
gulp.task('dynamicLocalePreload', function(){
    return file('dynamicLocalePreload.js', generateLocales(['en']), { src: true })
        .pipe(gulp.dest(paths.target + '/temp'));
});

/**
 * Creates preloaded dynamic locales for angular-dynamic-locale.
 * See https://github.com/lgalfaso/angular-dynamic-locale/issues/93#issuecomment-210826808
 */
function generateLocales(locales) {
    var i;
    var localesData = Object.create(null);
    var prefix = 'data:text/javascript;base64,';
    var outputPrefix = "angular.module('tmh.dynamicLocalePreload', ['tmh.dynamicLocale'])" +
        ".config(['tmhDynamicLocaleProvider', function(tmhDynamicLocaleProvider) {" +
        "tmhDynamicLocaleProvider.localeLocationPattern('{{base64Locales[locale]}}');" +
        "tmhDynamicLocaleProvider.addLocalePatternValue('base64Locales', ";
    var outputSuffix = ");}]);";

    // Read all the locales and base64 encode them.
    for (i = 0; i < locales.length; ++i) {
        localesData[locales[i]] = prefix + base64(
                fs.readFileSync(paths.target + 'lib/angular-i18n/angular-locale_' + locales[i] + '.js', 'utf8'));
    }

    return outputPrefix + JSON.stringify(localesData) + outputSuffix;

    function base64(content) {
        return new Buffer(content).toString('base64');
    }
}

/**
 * An exemplary build task, that uses the dynamically preloaded locales
 */
gulp.task('build', ['dynamicLocalePreload'], function(){
    var wiredep = require('wiredep')();

    var injectOpts = {
        addRootSlash: false,
        ignorePath: paths.target,
    };

    var bowerInjectOpts = {
        addRootSlash: false,
        ignorePath: paths.target,
        starttag: '<!-- bower:{{ext}} -->'
    };

    var scripts = gulp.src([paths.scripts + '/**/*.js', paths.target + '/temp/*.js'])
        .pipe($.angularFilesort()) // Sort js files in the order defined in .module()
        .pipe($.sourcemaps.init()) // Create a source map, that improves debugging with minified files
        .pipe($.ngAnnotate())      // Creates dependency injection annotations in angular files assuring DI keeps working after minifying
        .pipe($.concat('bundledApp.js'))  // Write individual files into one
        .pipe($.uglify())          // Minify and obfuscate
        .pipe($.rev())             // Add a revision to the file name (a hash), improving caching behavior
        .pipe($.rename({suffix: '.min'}))
        .pipe($.sourcemaps.write('.'))
        .pipe(gulp.dest(paths.target + 'js/'));

    return gulp.src(paths.index)
        .pipe($.inject(scripts, injectOpts))
        .pipe(gulp.dest(paths.target));
});

yourApp.js

(function() {
    'use strict';

    angular
        .module('yourApp', ['tmh.dynamicLocalePreload'])

})();