Merge pull request #79 from plouc/feat-reduce-build-size

Reduce mozaik js build size
plouc · Apr 14, 2016 · 6593261 · 6593261
2 parents acec447 + d5943d0
commit 6593261
Show file tree

Hide file tree

Showing 3 changed files with 81 additions and 79 deletions.
diff --git a/gulp/tasks/js.js b/gulp/tasks/js.js
@@ -1,77 +1,85 @@
-var gulp       = require('gulp');
-var uglify     = require('gulp-uglify');
-var source     = require('vinyl-source-stream');
-var buffer     = require('vinyl-buffer');
-var rename     = require('gulp-rename');
-var watchify   = require('watchify');
-var browserify = require('browserify');
-var babelify   = require('babelify');
-var gutil      = require('gulp-util');
-var chalk      = require('chalk');
-var config     = require('../config');
+var gulp        = require('gulp');
+var uglify      = require('gulp-uglify');
+var source      = require('vinyl-source-stream');
+var buffer      = require('vinyl-buffer');
+var rename      = require('gulp-rename');
+var watchify    = require('watchify');
+var browserify  = require('browserify');
+var resolutions = require('browserify-resolutions');
+var babelify    = require('babelify');
+var gutil       = require('gulp-util');
+var chalk       = require('chalk');
+var _           = require('lodash');
+var config      = require('../config');
 
 
 function getBundler(isDev) {
-    var bundler = browserify({
-        entries:      [config.src + 'App.jsx'],
-        extensions:   ['.js', '.jsx'],
-        debug:        isDev,
-        cache:        {},  // for watchify
-        packageCache: {},  // for watchify
-        fullPaths:    true // for watchify
+    var opts = _.assign({}, watchify.args, {
+        entries:    [config.src + 'App.jsx'],
+        extensions: ['.js', '.jsx'],
+        debug:      isDev,
+        fullPaths:  isDev
     });
 
-    bundler.transform(babelify, {
-        presets: ['es2015', 'react']
-    });
-
-    return bundler;
+    return browserify(opts)
+        .plugin(resolutions, [
+            'react',
+            'mozaik',
+            'lodash',
+            'react-mixin',
+            'convict',
+            'd3',
+            'classnames',
+            'bluebird',
+            'moment'
+        ])
+        .transform(babelify, { presets: ['es2015', 'react'] })
+    ;
 }
 
-gulp.task('watch:js', function () {
-    var watcher = watchify(getBundler(true));
-
-    return watcher
-        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
-        .on('update', function () {
-            watcher.bundle()
-                .pipe(source('mozaik.js'))
-                .pipe(gulp.dest(config.dest))
-                .pipe(buffer())
-                .pipe(uglify())
-                .pipe(rename({suffix: '.min'}))
-                .pipe(gulp.dest(config.dest))
-            ;
-
-            gutil.log(chalk.green('Updated JavaScript sources'));
+function bundle(bundler, isDev) {
+    var b = bundler
+        .bundle()
+        .on('error', function (err) {
+            gutil.log(chalk.red(err));
         })
-        .bundle() // Create the initial bundle when starting the task
         .pipe(source('mozaik.js'))
-        .pipe(gulp.dest(config.dest))
         .pipe(buffer())
-        .pipe(uglify())
-        .pipe(rename({ suffix: '.min'}))
         .pipe(gulp.dest(config.dest))
     ;
-});
 
-gulp.task('watch:js:dev', function () {
+    if (!isDev) {
+        b = b
+            .pipe(uglify())
+            .pipe(rename({ suffix: '.min' }))
+            .pipe(gulp.dest(config.dest))
+        ;
+    }
+
+    return b;
+}
+
+function getWatcher(isDev) {
     var watcher = watchify(getBundler(true));
 
     return watcher
-        .on('error', gutil.log.bind(gutil, 'Browserify Error'))
-        .on('update', function () {
-            watcher.bundle()
-                .pipe(source('mozaik.js'))
-                .pipe(buffer())
-                .pipe(gulp.dest(config.dest))
-            ;
+        .on('log', gutil.log)
+        .on('update', function (files) {
+            gutil.log(chalk.yellow('Updated JavaScript sources, changes in:'));
+            files.forEach(function (file) {
+                gutil.log('- ' + file);
+            });
 
-            gutil.log(chalk.green('Updated JavaScript sources [dev]'));
+            return bundle(watcher, isDev);
+        })
+    ;
+}
+
+gulp.task('watch:js', function () {
+    return bundle(getWatcher(true), true)
+        .on('end', function () {
+            gutil.log(chalk.yellow('watch:js watcher ready'));
         })
-        .bundle() // Create the initial bundle when starting the task
-        .pipe(source('mozaik.js'))
-        .pipe(gulp.dest(config.dest))
     ;
 });
 
@@ -85,8 +93,14 @@ gulp.task('js:dev', function () {
 });
 
 
-gulp.task('js', ['js:dev'], function () {
-    return gulp.src(config.dest + '/mozaik.js')
+gulp.task('js', function () {
+    process.env.NODE_ENV = 'production';
+
+    return getBundler(false)
+        .bundle()
+        .pipe(source('mozaik.js'))
+        .pipe(gulp.dest(config.dest))
+        .pipe(buffer())
         .pipe(uglify())
         .pipe(rename({ suffix: '.min' }))
         .pipe(gulp.dest(config.dest))

diff --git a/gulp/tasks/watch.js b/gulp/tasks/watch.js
@@ -2,29 +2,16 @@ var gulp   = require('gulp');
 var path   = require('path');
 var config = require('../config');
 
-function stylesWatcher(devMode) {
-    var appConfig = require(path.join(config.root, 'config.js'));
-    var theme     = appConfig.theme;
-    var task      = devMode ? 'styles:dev' : 'styles';
-
-    return gulp.watch([
-        config.root + path.join('config.js'),                                      // config for `theme` property
-        config.mozaikSrc + path.join('styl', '**', '*'),                           // mozaïk base styles
-        config.mozaikSrc + path.join('themes', '**', '*'),                         // mozaïk themes
-        config.root + path.join('themes', '**', '*'),                              // custom themes
-        config.root + path.join('node_modules', 'mozaik-ext-*', 'styl', '**', '*') // extensions styles
-    ], [task]);
-}
-
-gulp.task('watch:styles:dev', function () {
-    return stylesWatcher(true);
-});
-
 
 gulp.task('watch:styles', function () {
-    return stylesWatcher(false);
+    return gulp.watch([
+        config.root      + path.join('config.js'),                                      // config for `theme` property
+        config.mozaikSrc + path.join('styl', '**', '*'),                                // mozaïk base styles
+        config.mozaikSrc + path.join('themes', '**', '*'),                              // mozaïk themes
+        config.root      + path.join('themes', '**', '*'),                              // custom themes
+        config.root      + path.join('node_modules', 'mozaik-ext-*', 'styl', '**', '*') // extensions styles
+    ], ['styles:dev']);
 });
 
 
-gulp.task('watch:dev', ['watch:styles:dev', 'watch:js:dev']);
-gulp.task('watch',     ['watch:styles',     'watch:js']);
+gulp.task('watch', ['watch:styles', 'watch:js']);
diff --git a/package.json b/package.json
@@ -38,6 +38,7 @@
   "dependencies": {
     "bluebird": "3.3.5",
     "browserify": "13.0.0",
+    "browserify-resolutions": "1.0.6",
     "chalk": "1.1.3",
     "classnames": "2.2.3",
     "d3": "3.5.16",