javascript,gulp,watch,changed

Question

我无法理解这一点.这应该是每次修改监视文件时执行的gulp任务.任何人都可以解释为什么需要通过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']); 
}); 

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

Answer 1

之间的区别gulp.watch(),gulp-changed以及gulp-watch似乎造成了很多困惑,所以这里是我在解开混乱的尝试:

gulp.watch()

这三个是唯一的一个组成部分gulp本身,而不是一个插件.这很重要,因为它意味着与其他两个不同,它不会传递给pipe()gulp流的功能.

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

 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']); 
 }); 

在上面gulp.watch()用于监听.css文件的变化.只要gulp.watch()对.css文件运行任何更改,就会自动执行build-css任务.

这就是麻烦开始的地方.注意没有关于哪些文件传递给哪些文件的信息build-css？这意味着即使您只更改了一个.css文件,您的所有.css文件也会doSomethingHere()再次通过.该build-css任务没有线索,他们的这改变.只要你手上没有文件,这可能就好了,但随着文件数量的增加,你的构建速度会变慢.

那是gulp-changed进来的地方.

gulp-changed

这个插件被编写为gulp流中的过滤阶段.其目的是从流中删除自上次构建以来未更改的所有文件.它通过将源目录中的文件与目标目录中的结果文件进行比较来完成此操作:

 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']); 
 }); 

在上面,build-css仍然会调用.css文件的每次更改并.css读入所有文件.但是,只有那些实际更改的文件现在才能进入昂贵的doSomethingHere()阶段.其余的被过滤掉了gulp-changed.

build-css即使您没有注意文件更改,此方法也可以加快速度.您可以gulp build-css在命令行上显式调用,并且只build-css重建自上次调用以来已更改的那些文件.

gulp-watch

这个插件试图改进内置gulp.watch().虽然gulp.watch()用于gaze监听文件的变化,但通常认为这两种gulp-watch用途chokidar比较成熟.

您可以使用gulp-watch以达到与使用gulp.watch()和gulp-changed组合相同的效果:

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

这再次监视所有.css文件的更改.但是这次无论何时.css更改文件,都会再次读入该文件(并且只有该文件)并重新发送到它doSomethingHere()在到达目标目录的路径上传递的流.

请注意,这比较绘制三个人都比较粗线条的替代品,并省去了某些细节和特征(例如,我还没有谈到的回调函数,你可以传递给两个gulp.watch()和gulp-watch),但我认为这应该是足以让三者之间的主要差异.