Gulp 运行'；吞咽预处理'；作为'的一部分；狼吞虎咽'；任务

我以我的项目为基础，希望将

gulp预处理

集成到gulp管道中

我已成功使其用于

gulp-service: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:service

任务工作，该任务包括浏览器同步：

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

---

我想添加

htmlIncludes

任务，以便在运行

gulp:service

时更新文件时重新运行该任务。但是，简单地将其添加到当前包含

'styles'

的列表中并没有预期的效果。您知道我需要更改什么吗？

您完全正确，您必须将其添加到此任务的依赖项中，以便至少运行一次。然而，这只是故事的一半。每次更改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中回答您这个问题；-）