javascript,gulp,watch,changed

时间:2016-03-22 08:35:40

标签: javascript gulp watch gulp-changed

我无法理解这一点。 这应该是每次修改监视文件时执行的gulp任务。任何人都可以解释为什么需要通过public class TestClass { public static void main(String[] args) { @SuppressWarnings("resource") Scanner scanner = new Scanner(System.in); System.out.println("Enter Path to be searched"); String directory = scanner.next(); System.out.println("Enter String to be searched"); String searchString = scanner.next(); searchDirectory(directory, searchString); } static void searchDirectory(String directory, String searchString){ File dir = new File(directory); if(!dir.isDirectory()){ System.err.println("PATH ENTERED is not directory"); return; } try{ for (File file : dir.listFiles()) { if(!file.isDirectory()){ String fileName = file.getName().toLowerCase(); if (fileName.endsWith((".txt")) ||fileName.endsWith((".log"))) { @SuppressWarnings("resource") BufferedReader br = new BufferedReader(new FileReader(file)); String line; int Count =0, index = -1; while ((line = br.readLine()) != null) { Count++; index = line.indexOf(searchString); if(index != -1){ System.out.println("Text '"+searchString+"' Found at position "+index +" in file "+ fileName +" at Line No "+Count); } } } }else{ System.err.println("TestClass.searchDirectory(DIR)"+file.getAbsolutePath()); // searchDirectory(file.getAbsolutePath(), searchString); } } }catch(Exception e){ e.printStackTrace(); } } } 插件管理监视文件?

changed

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

1 个答案:

答案 0 :(得分:11)

gulp.watch()gulp-changedgulp-watch之间的差异似乎会造成很多混乱,所以我试图解开混乱:

gulp.watch()

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

相反,它通常直接从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

这个plugin被编写为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

plugin是尝试改进内置gulp.watch()。虽然gulp.watch()使用gaze来监听文件更改,但gulp-watch使用的chokidar通常被认为是两者中较为成熟的。{/ p>

您可以使用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()和{的回调函数{1}}),但我认为这应该足以让三者之间产生重大差异。