Question

我正在为我们的构建过程添加watchify但是我想提出一个前提条件来监视运行，那就是更改的文件通过了我们的linting步骤（使用{{1} }）。

我在考虑这样做：

ESLint

问题是linting步骤是异步的，因此在捆绑完成之前它没有完成（它也会抛出，所以我可能需要使用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之前，我该怎样做一个先决条件？

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

对于我的测试和prod构建，我不使用Watchify（因此没有rebundle（）方法）所以我保留了lint：js＆＃39;任务作为依赖：

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

在watchify运行之前运行eslint

1 个答案: