Browserify solo se pelucchi passa Gulp

Question

Sto cercando di realizzare questo flusso Gulp:

Sembra un processo abbastanza straight-forward, ma da quello che posso dire, non è possibile implementare come stream Gulp.

Attualmente sto facendo questo:

gulp.task('js', function() { 
    return browserify('foo/main.js') 
     .bundle() 
     .pipe(source('bundle.js')) 
     .pipe(streamify(jshint())) 
     .pipe(jshint.reporter('default')) 
     // source map, minify, … 
}); 

Il problema è che JSHint deve essere eseguito prima, solo il file modificato, e il processo dovrebbe essere interrotta se il residuo di stoffa non riesce. Nella mia configurazione, Browserify viene sempre eseguito e solo allora JSHint viene eseguito sull'intero pacchetto. Posso gestire la penalizzazione delle prestazioni, ma i numeri di riga di JSHint corrispondono al pacchetto generato e non ai miei file di origine JS, il che è un problema.

Answer 1

Questa è una bella idea. L'ho implementato nella mia pipeline utilizzando watchify, che filtra i file utilizzando il reporter predefinito e utilizza il reporter di fail se il file modificato non ha superato il test di lanugine. Anche se questo è raccomandato nella domanda, personalmente eviterei di farlo perché ciò che si vuole veramente è solo che il vostro reporter emetta dei controlli, mentre mantiene lo spettatore dello sviluppo ancora generato in background. Altrimenti devi continuare a riavviare l'attività, che in genere tende a infastidirmi. Comunque, ecco il codice:

'use strict'; 

var assign  = require('object-assign'), 
    gulp   = require('gulp'), 
    gutil  = require('gulp-util'), 
    merge  = require('merge-stream'), 
    jshint  = require('gulp-jshint'), 
    source  = require('vinyl-source-stream'), 
    watchify  = require('watchify'), 
    browserify = require('browserify'); 

var resources = { 
    mainJS : 'main.js', 
    bundleJS : 'bundle.js', 
    root  : 'www' 
}; 

function res(r) { 
    return './' + resources[r]; 
} 

gulp.task('watch', function() { 
    var bundler = watchify(browserify(res('mainJS'), assign(watchify.args, { 
     fullPaths: false 
    }))); 

    var scripts = function(changedFiles) { 
     var compileStream = bundler 
      .bundle() 
      .on('error', gutil.log.bind(gutil, gutil.colors.red('Browserify Error\n'))) 
      .pipe(source(res('bundleJS'))) 
      .pipe(gulp.dest(res('root'))); 

     if (changedFiles) { 
      var lintStream = gulp.src(changedFiles) 
       .pipe(jshint()) 
       .pipe(jshint.reporter('default')) 
       .pipe(jshint.reporter('fail')); 

      return merge(lintStream, compileStream); 
     } 

     return compileStream; 
    }; 

    bundler.on('update', scripts); 

    return scripts(); 
}); 

Si noti che questo si basa pesantemente fuori la ricetta ufficiale per browserify veloce costruisce con watchify (https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md), ed è un 'all-in-one' compito tipo; vale a dire che io in genere generare una singola attività da qualche parte in background, con il minimo registrazione (corro gulp con la bandiera --silent), che è personalmente più facile da affrontare :-)