代码之家 › 专栏 › 技术社区 › mishoo78

javascript,gulp,watch,更改

gulp-changed watch gulp javascript

mishoo78 · 技术社区 · 9 年前

我无法理解这一点。这应该是一个在每次修改被监视文件时执行的吞咽任务。有人能解释为什么需要通过 changed 插件?

gulp.task('build-css', function () {
  return gulp.src(paths.css)
  .pipe(changed(paths.output, {extension: '.css'}))
  .pipe(gulp.dest(paths.output));
});

gulp.task('watch', ['serve'], function() { 
  gulp.watch(paths.css, ['build-css']); 
});

免责声明:这不是我的代码。只是想了解发生了什么,以便创建我自己的自定义手表任务。

1 回复 | 直到 9 年前

Sven Schoenung 9 年前

两者之间的区别 gulp.watch() , gulp-changed 和 gulp-watch 似乎引起了很多混乱,所以我尝试解决这个问题:

`吞咽观察()`

这是三个人中唯一一个 part of gulp itself 而不是插件。这很重要,因为这意味着与其他两个不同,它不会传递给 pipe() 吞咽流的功能。

相反,它通常直接从吞咽任务内部调用:

 gulp.task('build-css', function() { 
    return gulp.src('src/**/*.css')
      .pipe(doSomethingHere())
      .pipe(gulp.dest('dist/css'));
 }); 

 gulp.task('watch', function() { 
    gulp.watch('src/**/*.css', ['build-css']); 
 });

在上面的 吞咽观察() 用于侦听中的更改 .css 文件夹。只要 吞咽观察() 正在运行对 .css文件 文件自动导致执行 build-css 任务

这就是问题的根源。请注意,没有关于更改的文件的信息传递给 构建css ? 这意味着即使你只改变一个 .css文件 文件 全部的 你的 .css文件 文件将通过 doSomethingHere() 再一次这个 构建css 任务不知道他们中的哪一个改变了。只要你只有一手文件,这可能是好的,但是随着文件数量的增加,你的构建速度会变慢。

那就是那里 口水变了 进来了。

`口水变了`

这 plugin 被写为在吞咽流中充当过滤级。其目的是从流中删除自上次构建以来未更改的所有文件。它通过将源目录中的文件与目标目录中的结果文件进行比较来实现此目的:

 gulp.task('build-css', function() { 
    return gulp.src('src/**/*.css')
      .pipe(changed('dist/css'))  //compare with files in dist/css
      .pipe(doSomethingHere())
      .pipe(gulp.dest('dist/css'));
 }); 

 gulp.task('watch', function() { 
    gulp.watch('src/**/*.css', ['build-css']); 
 });

在上面的 构建css 对于 .css文件 文件和所有 .css文件 文件被读入。然而,只有那些文件 实际上已经改变了 现在到达昂贵的 在此处做某事() 阶段其余的被过滤掉 口水变了 .

这种方法有利于加快 构建css 即使你没有注意到文件更改。您可以显式调用 gulp build-css 在命令行上,并且只有自上次调用 构建css 将重建。

`吞咽表`

这 plugin 试图改进内置的 吞咽观察() 虽然 吞咽观察() 使用 gaze 为了侦听文件更改, 吞咽表 使用 chokidar 这通常被认为是两者中比较成熟的。

您可以使用 吞咽表 达到与使用相同的效果 吞咽观察() 和 口水变了 组合:

 gulp.task('watch-css', function() { 
    return gulp.src('src/**/*.css')
      .pipe(watch('src/**/*.css'))
      .pipe(doSomethingHere())
      .pipe(gulp.dest('dist/css'));
 });

这又是一个值得关注的话题 .css文件 文件进行更改。但这一次 .css文件 文件已更改,该文件(和只有该文件)被再次读入并重新发送到它所经过的流 在此处做某事() 在到达目标目录的途中。

请注意,这个比较将所有三个备选方案都画得相当宽泛,并省略了某些细节和功能(例如,我还没有谈到可以传递给这两个函数的回调函数 吞咽观察() 和 吞咽表 ),但我认为这应该足以使三者之间的主要差异得到理解。