在任何构建工具中增量编译都是一个必不可少的优化方式。即在编译过程中仅编译那些修改过的文件，可以减少许多不必要的资源消耗，也能减少编译时常。而且gulp是一个配置简单，学习性价比很高的工具。

插件

在gulp官方推荐了四个插件用于增量编译：

– gulp-changed – only pass through changed files

– gulp-newer – pass through newer source files only, supports many:1 source:dest

– gulp-cached – in-memory file cache, not for operation on ts of files

– gulp-remember – pairs nicely with gulp-cached

增量编译

gulp.lastRun()

gulp4提供了lastRun函数用于获取上次运行任务的时间。

可以使用gulp.src函数的since和gulp.lastRun函数，在运行两次任务之间过滤掉未更改的文件：

var imgSrc = 'src/img/**';var imgDest = 'build/img';//压缩图片function images() {  return gulp.src(imgSrc, {since: gulp.lastRun(images)})    .pipe(imagemin({optimizationLevel: 5}))    .pipe(gulp.dest(imgDest));}function watch() {  gulp.watch(imgSrc, images);}gulp.task('watch',watch);

watch任务运行时会将文件保存在内存中，并且在watch任务退是你给我的力量出时删除。所以这只会在watch任务执行期间节省images任务的时间。

如果想要比较两次修改之间的变化，那么就需要使用gulp-changed和gulp-newer两个插件。两者的区别就是gulp-changed通过比较文件的生成和修改的时间，只会将修改过的文件发往下个流，如果后续存在文件合并则会出现文件缺失。所以gulp-changed只适合一对一的操作。而如果有多对一的情况，则需要使用gulp-newer。

gulp-changed

function images() {  return gulp.src(imgSrc)    .pipe(changed(imgDest))  //只把发生改变或新添加的图片文件发向下个流    .pipe(imagemin({optimizationLevel: 5}))    .pipe(gulp.dest(imgDest));}

如果文件输出的类型有所不同（sass===>css）需要加上extension参数{extension:’.css’}

gulp-changed是基于文件的更改，所以不一定需要使用gulp.watch(),连续使用gulp images命令效果是一样的。

gulp-c在山的那边hanged只支持一对一的文件更新，类似gulp-concat这样合并文件的操作，会有文件内容缺失。

gulp-newer

1:1输出

function ima校园新闻作文ges() {  return gulp.src(imgSrc)    .pipe(newer(imgDest))      .pipe(imagemin({optimizationLevel: 5}))    .pipe(gulp.dest(imgDest));}

many:1输出

类似gulp-concat这样的插件将多个文件合并成一个。在这种情况下，gulp-newer会把流通过所有文件，如果任何一个文件被更新，gulp-newer就会把他输出到下个流。

gulp.task('concat', function() {  return gulp.src('lib/*.js')      .pipe(newer('dist/all.js'))      .pipe(concat('all.js'))      .pipe(gulp.dest('dist'));});

gulp-cached

function images() {  return gulp.src(imgSrc)    .pipe(cache('imageMin'))    .pipe(imagemin({optimizationLevel: 5}))    .pipe(gulp.dest(imgDest));}function watch() {  gulp.watch(imgSrc, images);}gulp.task('watch',watch);

gulp-cached基于保存在内存里的数据的对比，关闭了gulp.watch()就没办法对比文件更新。

gulp-cached只会把发生改变的文件发往科普日下个流，如果在流的后期需要对所有文件进行操作，那么就需要gulp-remember的配合。

gulp-remember

gulp-remember可以将保存在内存中的所有文件都发向下个流

gulp-remember配合使用gulp-cached，可以方便处理当你只想重建那些改变了的文件，但仍然需要对流中的所有文件进行操作的情况。

下面这个案例就是将所有文件合并成一个文件的情况，流的前期用gulp-cached导出那些被修改的文件，后期使用gulp-remember将所有文件导向下个流进行合并操作。

var gulp = require('gulp'),    header = require('gulp-header'),    footer = require('gulp-footer'),    concat = require('gulp-concat'),    cache = require('gulp-cached'),    remember = require('gulp-remember');var scriptsGlob = 'src/**/*.js';function scripts(){  return gulp.src(scriptsGlob)      .pipe(cache('scripts')) // 只通过世界杯赛程时间表发生改变的文件      .pipe(header('(function () {')) // 在文件头部添加代码'(function () {'      .pipe(footer('})();')) // 在文件尾部添加代码'})();'      .pipe(remember('scripts')) // 将所有文件‘召唤’回这个流，其中一些已经被header和footer处理过      .pipe(concat('app.js')) // 合并文件      .pipe(gulp.dest('public/'))}function watch(){  var watcher = gulp.watch(scriptsGlob, scripts);   watcher.on('change', function (event) {    if (event.type === 'deleted') {       delete cache.caches['scripts'][event.path];      remember.forget('scripts', event.path);    }  });}gulp.task('watch',watch);