运行watchify之前运行eslint

Question

运行watchify之前运行eslint

7

我正在将watchify加入我们的构建流程，但我想在运行watchify之前设置前提条件，即更改的文件需通过我们的代码检查步骤（使用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());
}

问题在于linting步骤是异步的，因此在捆绑完成之前它不会完成（它还会抛出异常，所以我可能需要使用plumber来防止它终止watch步骤）。

那么，在调用bundleShared之前，我该如何设置前置条件呢？

- Aaron Powell

你解决了这个问题吗？ - Loknar

不行。我只能让它们并排运行，所以有时会错过 ESLint 错误。 - Aaron Powell

1

我在想是否可以通过将闭包传递给watchify.on('update', func)来实现？https://github.com/substack/watchify 我会尝试一下并让您知道。 - Matthew Herbst

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Matthew Herbst · Accepted Answer

我能够使用我之前提到的闭包方法来完成这个任务。我还将我的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（因此没有rebundle（）方法），所以我将'lint:js'任务作为依赖项：

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