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仅编译已更改的文件

1 个答案: