使用 gulp 仅编译更改的文件

Question

我有很多 .jade、.styl 和 .coffee 文件位于不同的子文件夹中。

我想只编译有变化的文件。我正在使用 gulp 并得出以下模式：

var watch = require('gulp-watch'),

watch(['app/**/*.styl'], function (e) {
    gulp.src(e.path)
        .pipe(stylus({use: nib()}))
        .pipe(gulp.dest('./app'))

然而，此模式将编译后的文件存储到 ./app 文件夹的根目录中，而不是源文件所在的文件夹中。我尝试了很多东西，但都是徒劳的。问题是缺少 gulp-watch 和其他的文档和示例。

谁能告诉我如何将编译后的文件存储到其源文件夹中？

Answer 1

问题是您将 e.path（即每个更改文件的完整路径）作为 glob 模式传递给 gulp.src()。这意味着您的 glob 模式实际上并不包含 glob（如 * 或 **），在这种情况下，文件所在的目录将用作 base option 的默认值至 gulp.src()。当使用 gulp.dest() 写入文件时，base 选项会导致整个目录结构被剥离。

解决方案是使用 streaming variant of gulp-watch 而不是回调变体 ...

gulp.src('app/**/*.styl')
  .pipe(watch('app/**/*.styl'))
  .pipe(stylus({use: nib()}))
  .pipe(gulp.dest('./app'));

... 或为回调变体提供适当的 base 选项：

watch(['app/**/*.styl'], function (e) {
  gulp.src(e.path, {base: 'app'})
    .pipe(stylus({use: nib()}))
    .pipe(gulp.dest('./app'));
});

使用 gulp 仅编译更改的文件

Using gulp for compiling of changed files only

gulp

gulp-watch