Gulp watch and read. hours but don't build again

Question

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

gulp browserify 

this works great. However, this was unpleasant, and I wanted to add a clock to this so that when making any changes to the scripts it would automatically launch the gulp browser or something else, and I would not have to do it manually. So here is what I did with 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, he 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 appear on the pages. I assume that they just watch it, but not build it? What am I missing?

EDIT

I added this

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

but now it is checked too often, and even when updating, my computer processor rises! any better ideas out there?

thanks

Answer 1

You should use Watchify with Browserify to monitor file changes with less performance overhead. When your application begins to expand, your code base will take a long time because Browserify rebuilds each file, even if only one file has been changed in the latest modification.

Viewing only restores what he needs. The initial build (when you run the gulp task) remains the same as before, but with each change you will see the difference.

In the JavaScript application 5578610 bytes, the original assembly takes 6.67s , and ~ 400 ms is required when rebuilding the file. Only with Browserify is there 6.67s with every change.

To get started, install the NPM packages:

 npm install browserify watchify --save-dev 

Import Browserify and Watchify into your gulpfile.js :

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

Initialize the coherent (I use Lodash _ for the item). client.js is the entry point to the application:

 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, the package starts 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. }); 

Launch gulp watch and you are ready to go.

Note. You should only set entry points as plug-in entries. The browser and the dependency branch will take care of the rest, and you will not create the same file twice.

Answer 2

For me, the problem is with the directory structure, it seems that gulp does not handle relative paths, which is good, at least in my case.

My project was set up something like this:

 / project/ gulpfile.js src/ app.js build/ mybuiltfile.js 

I ended up moving all of this to a single folder, and this fixed my problem.