如何从两个或多个其他任务中运行一个gulp任务并通过管道

Question

这一定很明显，但我找不到它。我想在开发环境中使用监视器预处理我的手写笔/咖啡文件，并在生产环境中使用构建任务(这对我们所有人来说不是很常见吗?)，并在生产环境中运行更多的缩小和美化步骤，但我想分享开发和生产中DRY的管道步骤

问题是，当我运行监视文件的任务时，对所有文件进行预处理的任务，因为它有自己的gulp。SRC语句，包含所有手写笔文件。

如何避免在监视时编译所有文件，同时仍然保持编译任务分开。由于

paths = {
    jade: ['www/**/*.jade']
  };
  gulp.task('jade', function() {
    return gulp.src(paths.jade).pipe(jade({
      pretty: true
    })).pipe(gulp.dest('www/')).pipe(browserSync.stream());
  });

 gulp.task('serve', ['jade', 'coffee'], function() {
    browserSync.init({
      server: './www'
    });
    watch(paths.jade, function() {
      return gulp.start(['jade']);
    });
    return gulp.watch('www/**/*.coffee', ['coffee']);
  });

Answer 1

在Gulp中很重要的一点是而不是来复制管道。如果你想处理你的手写笔文件，它必须是唯一的手写笔管道。但是，如果希望在管道中执行不同的步骤，则有多种选择。我建议将noop()函数与选择函数结合使用:

var through = require('through2'); // Gulp's stream engine
/** creates an empty pipeline step **/
function noop() {
  return through.obj();
}
/** the isProd variable denotes if we are in
  production mode. If so, we execute the task.
  If not, we pass it through an empty step
  **/
function prod(task) {
  if(isProd) {
    return task;
  } else {
    return noop();
  }
}
gulp.task('stylus', function() {
  return gulp.src(path.styles)
    .pipe(stylus())
    .pipe(prod(minifyCss())) // We just minify in production mode
    .pipe(gulp.dest(path.whatever))
})

对于增量构建(每次迭代只构建更改的文件)，最好的方法是使用gulp-cached插件:

var cached = require('gulp-cached');
gulp.task('stylus', function() {
  return gulp.src(path.styles)
    .pipe(cached('styles')) // we just pass through the files that have changed
    .pipe(stylus())
    .pipe(prod(minifyCss()))
    .pipe(gulp.dest(path.whatever))
})

这个插件将检查你所做的每次迭代是否改变了内容。

在我的书中，我花了整整一章的时间来介绍不同环境下的Gulp，我发现这些是最合适的。有关增量构建的更多信息，您也可以查看我的文章(包括Gulp4): http://fettblog.eu/gulp-4-incremental-builds/