Gulp retry retest

Question

I use Gulp as my task runner and browser to bundle my CommonJs modules.

I noticed that launching my task on the browser is rather slow, it takes about 2 - 3 seconds, and all I have is React and some very small components that I created for development.

Is there a way to speed up the task or do I have any noticeable problems in my task?

gulp.task('browserify', function() { var bundler = browserify({ entries: ['./main.js'], // Only need initial file transform: [reactify], // Convert JSX to javascript debug: true, cache: {}, packageCache: {}, fullPaths: true }); var watcher = watchify(bundler); return watcher .on('update', function () { // On update When any files updates var updateStart = Date.now(); watcher.bundle() .pipe(source('bundle.js')) .pipe(gulp.dest('./')); console.log('Updated ', (Date.now() - updateStart) + 'ms'); }) .bundle() // Create initial bundle when starting the task .pipe(source('bundle.js')) .pipe(gulp.dest('./')); }); 

I use Browserify, Watchify, Reactify and Vinyl Source Stream, as well as several other unrelated modules.

 var browserify = require('browserify'), watchify = require('watchify'), reactify = require('reactify'), source = require('vinyl-source-stream'); 

thanks

Answer 1

See fast tracking browser locks . Please note that the only thing passed to the browser is the main entry point and keeps track of the configuration.

Transforms are added to the watchify shell.

_{code from articleeded verbatim}

 var gulp = require('gulp'); var gutil = require('gulp-util'); var sourcemaps = require('gulp-sourcemaps'); var source = require('vinyl-source-stream'); var buffer = require('vinyl-buffer'); var watchify = require('watchify'); var browserify = require('browserify'); var bundler = watchify(browserify('./src/index.js', watchify.args)); // add any other browserify options or transforms here bundler.transform('brfs'); gulp.task('js', bundle); // so you can run `gulp js` to build the file bundler.on('update', bundle); // on any dep update, runs the bundler function bundle() { return bundler.bundle() // log errors if they happen .on('error', gutil.log.bind(gutil, 'Browserify Error')) .pipe(source('bundle.js')) // optional, remove if you dont want sourcemaps .pipe(buffer()) .pipe(sourcemaps.init({loadMaps: true})) // loads map from browserify file .pipe(sourcemaps.write('./')) // writes .map file // .pipe(gulp.dest('./dist')); } 

Answer 2

You need to use watchify and enable its cache. Take a look at: https://www.codementor.io/reactjs/tutorial/react-js-browserify-workflow-part-2 and for more optimization when creating the source map you can do this:

cd node_modules / browsify && & & npm i substack / browser-pack # sm-fast this will provide you half the time.

part of my gulpfile.js

 var gulp = require('gulp'); var uglify = require('gulp-uglify'); var htmlreplace = require('gulp-html-replace'); var source = require('vinyl-source-stream'); var browserify = require('browserify'); var watchify = require('watchify'); var reactify = require('reactify'); var streamify = require('gulp-streamify'); var path = { OUT : 'build.js', DEST2 : '/home/apache/www-modules/admimail/se/se', DEST_BUILD : 'build', DEST_DEV : 'dev', ENTRY_POINT : './src/js/main.jsx' }; gulp.task('watch', [], function() { var bundler = browserify({ entries : [ path.ENTRY_POINT ], extensions : [ ".js", ".jsx" ], transform : [ 'reactify' ], debug : true, fullPaths : true, cache : {}, // <---- here is important things for optimization packageCache : {} // <---- and here }); bundler.plugin(watchify, { // delay: 100, // ignoreWatch: ['**/node_modules/**'], // poll: false }); var rebundle = function() { var startDate = new Date(); console.log('Update start at ' + startDate.toLocaleString()); return bundler.bundle(function(err, buf){ if (err){ console.log(err.toString()); } else { console.log(' updated in '+(new Date().getTime() - startDate.getTime())+' ms'); } }) .pipe(source(path.OUT)) .pipe(gulp.dest(path.DEST2 + '/' + path.DEST_DEV)) ; }; bundler.on('update', rebundle); return rebundle(); }); gulp.task('default', [ 'watch' ]); 

Answer 3

Many thanks @PHaroZ for this answer. I had to modify this code a bit for my needs. I work with ReactJS on the Symfony2 platform, and all my builds took 7 s-21! Crazy .. So what I have now:

 var path = { OUT : 'app.js', DEST_BUILD : './src/MyBundle/Resources/js/dist', ENTRY_POINT : './src/MyBundle/Resources/js/src/app.js' }; gulp.task('watch', [], function() { var bundler = browserify({ entries : [ path.ENTRY_POINT ], extensions : [ ".js", ".jsx" ], // transform : [ 'reactify' ], debug : true, fullPaths : true, cache : {}, // <---- here is important things for optimization packageCache : {} // <---- and here }).transform("babelify", {presets: ["es2015", "react"]}); bundler.plugin(watchify, { // delay: 100, // ignoreWatch: ['**/node_modules/**'], // poll: false }); var rebundle = function() { var startDate = new Date(); console.log('Update start at ' + startDate.toLocaleString()); return bundler.bundle(function(err, buf){ if (err){ console.log(err.toString()); } else { console.log(' updated in '+(new Date().getTime() - startDate.getTime())+' ms'); } }) .pipe(source(path.OUT)) .pipe(gulp.dest(path.DEST_BUILD)) ; }; bundler.on('update', rebundle); return rebundle(); }); 

Now the first compiler takes about 20 seconds, and every time I update my file, it takes about 800 ms. This is enough time to switch from IDE to my browser.