在watchify運行之前運行eslint

Question

我在我們的構建過程中添加了watchify，但我希望提前注意運行，那就是更改的文件通過了我們的linting步驟（使用ESLint）。

我想這樣做的：

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

問題是掉毛的步驟是異步所以也沒有完成捆綁將完成之前（也拋出所以我可能需要使用plumber阻止它終止watch步驟）。

那麼在我打電話給bundleShared之前，我會怎麼做一個先決條件？

Answer 1

我能夠使用上面提到的閉包方法做到這一點。我還將我的Browserify和Watchify代碼移入每個構建都可以利用的幫助函數中。

gulpfile.js（部分）

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

對於我的測試，並督促建立，我不使用Watchify（因此沒有重新打包（）方法），所以我保持「皮棉：JS '作爲依賴項的任務：

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