Eslint prima dell'esecuzione di watchify

Question

Sto aggiungendo watchify al nostro processo di compilazione ma voglio porre una precondizione a watchify in esecuzione, e cioè che i file che sono stati modificati passano il nostro passaggio di linting (che utilizza ESLint).

stavo pensando di fare questo:

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

Il problema è che il passo rilascio di fibre è asincrono in modo da non finire prima che l'accorpamento sarebbe fatto (si getta anche quindi probabilmente ho bisogno di usare plumber per impedirgli di terminare il passaggio watch).

Quindi, come potrei fare una precondizione prima di chiamare lo bundleShared?

Answer 1

Sono stato in grado di farlo utilizzando il metodo di chiusura che ho menzionato sopra. Ho anche spostato il mio codice Browserify e Watchify in funzioni di supporto che ogni build poteva sfruttare.

gulpfile.js (parziale)

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; 
} 

Per la mia prova e prod costruisce, non usare Watchify (e quindi non hanno alcun rebundle() metodo) in modo da mantenere il 'lint: js 'compito come dipendenza:

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