作为“gulp serve”任务的一部分运行“gulp-preprocess”答案

【问题标题】：Running 'gulp-preprocess' as part of 'gulp serve' task作为“gulp serve”任务的一部分运行“gulp-preprocess”
【发布时间】：2015-05-02 17:58:35
【问题描述】：

我的项目基于 Google Web Starter Kit，并希望将 gulp-preprocess 集成到 gulp 管道中。

我已经设法让它为gulp serve:dist 任务工作，相关代码是：

 gulp.task('htmlIncludes', function() {
      gulp.src('app/*.html')
        .pipe(preprocess({context: { NODE_ENV: 'production', DEBUG: true}})) 
        .pipe(gulp.dest('./dist/'))
    }); 

    gulp.task('default', ['clean'], function (cb) {
      runSequence('styles', ['jshint', 'html', 'images', 'fonts', 'copy', 'htmlIncludes'], cb);
    });

但是，我无法让它用于包含浏览器同步的 gulp:serve 任务：

gulp.task('serve', ['styles'], function () {
  browserSync({
    notify: false,
    server: ['.tmp', 'app']
  });

我想添加htmlIncludes 任务，以便在运行gulp:serve 时更新文件时重新运行它。但是，仅将其添加到当前包含 'styles' 的列表中并没有预期的效果。知道我需要改变什么吗？

【问题讨论】：

标签： gulp google-web-starter-kit

【解决方案1】：

您完全正确，您必须将其添加到此任务的依赖项中才能至少运行一次。然而，这只是故事的一半。每次您的 HTML 文件发生更改时，您都必须运行您的任务，因此请将其添加到相应的 watch 进程中：

gulp.task('serve', ['styles', 'htmlIncludes'], function () {
    browserSync({
        notify: false,
        logPrefix: 'WSK',
        server: ['.tmp', 'app']
    });

    // here's the change
    gulp.watch(['.tmp/**/*.html', 'app/**/*.html'], ['htmlIncludes', reload]);
    gulp.watch(['app/styles/**/**/**/**/*.{scss,css}'], ['styles', reload]);
    gulp.watch(['app/scripts/**/*.js'], ['jshint']);
    gulp.watch(['app/images/**/*'], reload);
});

您还看到，此 browserSync 调用仅服务于 .tmp 和 app 文件夹，而您的输出存储在 dist 中。所以你也必须改变你的htmlIncludes 任务：

gulp.task('htmlIncludes', function() {
     return gulp.src('app/*.html')
         .pipe(preprocess({context: { NODE_ENV: 'production', DEBUG: true}})) 
         .pipe(gulp.dest('./.tmp/'))
         .pipe(gulp.dest('./dist/'))
});

如果您需要为每个输出单独配置，我们必须再次处理它。但目前它应该按计划工作。

您也有可能必须先按顺序运行'html' 任务，但我不适合 WSK Gulpfile 来回答您这个问题 ;-)

【讨论】：