gulp watch and browserify. watches but doesnt build again

Question

So today is my first day playing around with gulp and grunt or any task runner for js. I got to a place where I was able to change my code in my js files and then run the

gulp browserify 

this works fine. However it was annoying and I wanted to add a watch to this so that when I make any changes to the scripts, it would automatically run gulp browserify or something and I would not have to do it manually. So here is what I did to my gulp.js

    var gulp = require('./gulp')({


});



gulp.task('watch', function() {
    // Watch .js files
    gulp.watch('jsfolder/**/*.js', ['scripts']);

});
gulp.task('release', ['build']);
gulp.task('build', ['scripts', 'browserify']);
gulp.task('default', ['watch']);

so when I do this

gulp watch

and when I save my changes it gives me

14:37:21] Starting 'clean'...
[14:37:21] Finished 'clean' after 3.18 ms
[14:37:21] Starting 'concat'...
[14:37:21] Finished 'concat' after 263 μs
[14:37:21] Starting 'checksum'...
[14:37:21] Finished 'checksum' after 19 ms
[14:37:21] Starting 'scripts'...
[14:37:21] Finished 'scripts' after 455 μs
[14:38:41] Starting 'clean'...
[14:38:41] Finished 'clean' after 2.9 ms
[14:38:41] Starting 'concat'...
[14:38:41] Finished 'concat' after 218 μs
[14:38:41] Starting 'checksum'...
[14:38:41] Finished 'checksum' after 18 ms
[14:38:41] Starting 'scripts'...
[14:38:41] Finished 'scripts' after 302 μs

but my changes never make show up on pages. I am assuming that its just watching and not building? What am I missing?

EDIT

I added this

 gulp.watch('ui.id.go.com/public/**/*.js', ['scripts','browserify']);

but now its checking it way too often and even though updating, my machine cpu is hiked up!! any better ideas out there?

thanks

Answer 1

You should use Watchify with Browserify to watch file changes with less performance costs. When your application begins to expand, your codebase will take to much time to bundle because Browserify rebuilds every file, even if only one file has changed in the latest modification.

Watchify only rebuilds what it needs to. The initial build (when you run a gulp task) remains the same as before, but at each change, you'll see the difference.

In a 5578610 bytes JavaScript application, the initial build take 6.67s, and rebuild on file change take ~400ms. With Browserify only, there is 6.67s on every change.

To get started, install the NPM packages:

npm install browserify watchify --save-dev

Import Browserify and Watchify in your gulpfile.js:

var browserify = require('browserify');
var watchify = require('watchify');

Init the bundler (I'm using Lodash _ for the commodity). client.js is the application entry point here:

var bundler = watchify(browserify(_.assign(watchify.args, {
  entries: ['./src/client.js'],
  debug: true
})));

bundler.on('log', gutil.log); // Output build logs to terminal using gulp-util.

Then create your bundle() function using Watchify:

function bundle() {
  return bundler.bundle()

    // Log errors if they happen.
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('client.js'))

    // Optional, remove if you don't need to buffer file contents.
    .pipe(buffer())

    // Optional, remove if you dont want sourcemaps.
    // Loads map from Browserify file using gulp-sourcemaps.
    .pipe(sourcemaps.init({loadMaps: true}))

    // Add transformation tasks to the pipeline here.
    .pipe(sourcemaps.write('./')) // Writes .map file.
    .pipe(size(config.size)) // Checks output file size with gulp.size.
    .pipe(gulp.dest('./build'));
}

Finally, runs the bundler when there is a dependency update:

gulp.task('scripts', bundle);
gulp.task('watch', ['scripts'], function() {
  bundler.on('update', bundle); // On any dependency update, runs the bundler.
});

Run gulp watch and you're ready to work.

Note: you should only set entry points as bundler entries. Browserify and the dependency branch will take care of the rest, and you will not build the same file twice.