Gulp：我该如何处理从未完成的任务？

Question

I'm trying to write a gulp plugin for watchify that allows me to pipe files into it. The problem is that my task never actually "finishes", as it sits there and monitors a bunch of files and re-builds as necessary.

So how do I send code "through" this plugins?

Right now, my task calling the plugin is simplified to:

gulp.src( '/path/to/js/*.js' )
    .pipe( watchifyPlugin() )
    .pipe( cfg.gulp.dest( '/path/to/build' ) )

My watchifyPlugin is:

module.exports = function( opts ){
    return through.obj( function( file, enc, cb ){
        // watchify file
        self.push( data ); // whenever any .js files are updated

        // never call cb()
    }
}

Now this works fine for the first .js file that my glob finds. Any other files never actually get to my plugin, however, and I'm assuming it's because I never call cb() .

So how do I do this? Is there a way to keep writing to the stream without calling cb() , which closes it, yet still allow the previous pipes to continue?

in other words:

• index.js
  • watchify()
  • pipes to dest() just fine, even when I call self.push() again and again
  • cb() never called
• index2.js
  • watchify() never called until cb() called for index.js , but this "closes" the index.js pipe

Answer 1

You are using through in a wrong way, you must call the callback when you are done with the file ('data' event). However it is not cb() that closes the stream, it is emitting the end even that does this.

You can delay the end event and keep calling this.push to send out new files.

Something like

var Through = require('through2').obj;
var my_plugin = function() {

  var last_file = null; // as an example, last emitted file

  function handle_data = function(file, enc, done) { 
    this.push(file); // emit the file
    this.push(file); // just for kicks, emit it again
    last_file = file;
    done(); // done handling *this* file
  }

  function handle_end = function(done) {
     if(last_file) this.push(last_file); // emit the last file again
     done(); // handled the 'end' event
  }

  return Through(handle_data, handle_end);
}

This would emit each file twice before processing the next file, then when it's done with all files (the end event is received) it emits the last file one more time and then emits the end event.

But why are you not using gulp.watch and just run the task again when something has changed? or even use the gulp-watch plugin which emits files when they changed?

Answer 2

This is a very bad idea. Not everything in gulp needs to be a plugin, and in particular, browerify and watchify plugins are consistently banned. (See https://github.com/gulpjs/plugins/blob/master/src/blackList.json .) If you want to run watchify, just use watchify directly. From https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md :

var gulp = require('gulp');
var source = require('vinyl-source-stream');
var watchify = require('watchify');

gulp.task('watch', function() {
  var bundler = watchify('./src/index.js');

  // Optionally, you can apply transforms
  // and other configuration options on the
  // bundler just as you would with browserify
  bundler.transform('brfs');

  bundler.on('update', rebundle);

  function rebundle () {
    return bundler.bundle()
      .pipe(source('bundle.js'))
      .pipe(gulp.dest('./dist'))
  }

  return rebundle();
});