Browserify nur, wenn Fusseln geht in Gulp

Question

Ich versuche, diesen Gulp Stream zu erreichen:

Es scheint wie ein ziemlich einfacher Prozess, aber von dem, was ich sagen kann, ist es nicht möglich, als Gulp-Stream implementieren.

Ich tue dies derzeit:

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

Das Problem ist, dass JSHint zuerst ausgeführt werden soll, nur auf die geänderte Datei, und der Vorgang abgebrochen werden soll, wenn die Flusen ausfällt. In meinem Setup wird Browserify immer ausgeführt, und nur dann läuft JSHint auf dem gesamten Bundle. Ich kann mit der Leistungseinbuße umgehen, aber die Zeilennummern von JSHint entsprechen dem generierten Bundle und nicht meinen JS-Quelldateien, was ein Schmerz ist.

Answer 1

Das ist eine coole Idee. Ich habe dies in meine Pipeline mit Hilfe von Watchify implementiert, die Dateien mit dem Standard-Reporter fusselt und den Fail-Reporter verwendet, wenn die Datei den Flusstest nicht bestanden hat. Auch wenn dies in der Frage empfohlen wird, würde ich persönlich vermeiden, dies als das zu tun, was Sie wirklich wollen, ist nur für Ihren Reporter, um Lint-Checks zu emittieren, während der Entwicklungsbeobachter immer noch im Hintergrund hervorgebracht wird. Sonst muss man die Aufgabe immer wieder neu starten, was mich im Allgemeinen eher nervt. Wie auch immer, hier ist der Code:

'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(); 
}); 

Beachten Sie, dass diese für eine schnelle browserify stark von dem offiziellen Rezepte basiert baut mit watchify (https://github.com/gulpjs/gulp/blob/master/docs/recipes/fast-browserify-builds-with-watchify.md) und ist eine ‚all-in-one‘ Typ Aufgabe; das heißt, dass ich in der Regel eine einzige Aufgabe laichen irgendwo vor im Hintergrund, mit minimal Protokollierung (I laufe schluck mit der --silent Flagge), die persönlich leichter zu behandeln :-)