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/

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

1 个答案: