Uruchom eslint przed uruchomieniem działa

Question

Dodaję watchify do naszego procesu kompilacji, ale chcę wprowadzić warunek wstępny do obserwowania działania, a to, że zmieniony plik przechodzi przez nasz krok linting (który używa ESLint).

myślałem w ten sposób:

function runBrowserify(watch){ 
    var babel = babelify.configure({ 
     optional: ['es7.objectRestSpread'] 
    }); 
    var b = browserify({ 
    entries: './app/main.js', 
    debug: true, 
    extensions: ['.jsx', '.js'], 
    cache: {}, 
    packageCache: {}, 
    fullPaths: true 
    }) 
    .transform(babel); 

    if(watch) { 
    // if watch is enable, wrap this bundle inside watchify 
    b = watchify(b); 
    b.on('update', function(ids) { 
     //run the linting step 
     lint(ids); 

     //run the watchify bundle step 
     gutil.log(gutil.colors.blue('watchify'), 'Started'); 
     bundleShare(b); 
    }); 
    b.on('time', function (time) { 
     gutil.log(gutil.colors.blue('watchify'), 'Finished', 'after', gutil.colors.magenta(time), gutil.colors.magenta('ms')); 
    }); 
    } 

    bundleShare(b); 
} 

function bundleShare(b) { 
    b.bundle() 
    .pipe(source('main.min.js')) 
    .pipe(gulp.dest('./dist')); 
} 

function lint(glob) { 
    return gulp.src(glob) 
    .pipe(eslint()) 
    .pipe(eslint.format()) 
    .pipe(eslint.failOnError()); 
} 

Problemem jest to, że krok do strzępienia jest asynchroniczny więc nie zakończyć przed pakietowa byłoby zrobić (to również rzuca więc prawdopodobnie trzeba użyć plumber aby zatrzymać go od zakończenia kroku watch).

W jaki sposób zdefiniować warunki wstępne, zanim zadzwonię pod numer bundleShared?

Answer 1

Udało mi się to zrobić za pomocą metody zamknięcia, o której wspomniałem powyżej. Przesunąłem również mój kod Browserify i Watchify do funkcji pomocniczych, z których każda kompilacja może skorzystać.

gulpfile.js (częściowe)

gulp.task('build:dev', buildDev); 
gulp.task('lint:js', lintJS); 

function lintJS(callback) { 
    return gulp.src(['src/**/*.js', 'src/**/*.jsx', '!src/js/vendor/**/*.*',]) 
     .pipe(eslint()) 
     .pipe(eslint.format()) 
     .pipe(eslint.failAfterError()); 
} 

function buildDev(callback) { 
    var bundler = getBundler('src/js/app.jsx', { debug: true }, callback); 
    var watcher = getWatcher(bundler, rebundle); 

    function rebundle() { 
    lintJS(callback); 

    return watcher.bundle() 
     .pipe(source('bundle.min.js')) 
     .pipe(buffer()) 
     .pipe(gulp.dest('dist/js')); 
    } 

    rebundle(); 
    // Call watch methods here, i.e.: watchHTML() 
    return callback(); 
} 

/****************************** Helper functions ******************************/ 

/** 
* Gets the default Browserify bundler used by all builds. 
* 
* 
* @param path A string representing where Browserify should start from 
* @param options An Object containing options for the bundler 
* @param callback The Gulp callback function from the calling task 
* @return A basically configured Browserify bundler 
*/ 
function getBundler(path, options, callback) { 
    var bundler = browserify(path, { debug: options.debug, cache: {}, packageCache: {} }); 
    bundler.transform(babelify); 
    bundler.on('log', gutil.log); 
    bundler.on('error', gutil.log.bind(gutil.colors.red, 'Browserify Error')); 

    return bundler; 
} 

/** 
* Gets the default Watchify watcher used by dev builds. By default, the watcher 
* will rebundle the Browserify package when an update occurs. 
* 
* @param bundle The Browserify bundler object 
* @param rebundle A function to perform when Watchify detects a code update 
* @return A basically configured Watchify watcher 
*/ 
function getWatcher(bundle, rebundle) { 
    var watcher = watchify(bundle); 
    watcher.on('update', rebundle); 

    return watcher; 
} 

Dla mojego testu i prod buduje, nie używam Watchify (a zatem nie mają rebundle() metoda), więc zachować „szarpie: js "zadanie jako zależność:

gulp.task('build:test', ['lint:js'], buildTest); 
gulp.task('build:prod', ['lint:js'], buildProd);