gulp只编译更改过的文件加快编译速度

项目中我使用.watch()方法监听html文件改动，并使用browserSync自动刷新浏览器。 但随着开发静态页面写的越来越多，发现保存后页面自动刷新看到的确不是最新的改动结果。思来想去也想不通是为什么！后来查看“html”任务过程，发现我改某个文件后会把所有html文件（包括未改动的html文件）都重新编译了一遍，耗费了大量的时间，11个文件时间从40到80毫秒不等。

后来猜想是不是因为编译速度过慢，导致还没有编译完就执行了刷新浏览器任务，所以浏览器载入的还是改动前的文件。为了验证一下，我把文件数量缩减到1个，再次执行流程，单个文件编译速度在10到20毫秒之间，这回浏览器刷新一切都正常了。 //把所有页面文件扔进dist文件夹 gulp.task('html', function () { return gulp.src(srcHtml+"*.html") //这里是一些文件处理过程 .pipe(gulp.dest(destHtml)) .pipe(reload({stream: true}));

}); 找到了问题所在，我们就可以对症下药了。

gulp有款工具包“gulp-changed”，它可以只让更改过的文件传递进管道，这样就能实现只编译更改过的文件了。

简单用法如下： //把所有页面文件扔进dist文件夹 gulp.task('html', function () { return gulp.src(srcHtml+"*.html") .pipe(changed(destHtml)) //工具包需要提前知道目标目录位置才能找出哪些文件是被修改过的 //这里是一些文件处理过程 .pipe(gulp.dest(destHtml)) .pipe(reload({stream: true}));

});

用了“gulp-changed”之后我们再改动一下文件试试，可以发现只编译我们改过的文件，用时非常短。