如何从两个或多个其他任务运行 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))
})

这个插件会检查你每次迭代的内容是否发生了变化。

我在my book 中花了整整一章来介绍 Gulp 的不同环境，我发现那些是最合适的。有关增量构建的更多信息，您还可以查看我的文章（包括 Gulp4）：http://fettblog.eu/gulp-4-incremental-builds/