在任何构建工具中增量编译都是一个必不可少的优化方式。即在编译过程中仅编译那些修改过的文件，可以减少许多不必要的资源消耗，也能减少编译时常。而且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 sets of files
  • gulp-remember - pairs nicely with gulp-cached

增量编译

gulp.lastRun()

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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

1
2
3
4
5
6
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-changed只支持一对一的文件更新，类似gulp-concat这样合并文件的操作，会有文件内容缺失。

gulp-newer

1:1输出

1
2
3
4
5
6
function images() {
  return gulp.src(imgSrc)
    .pipe(newer(imgDest))  
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest(imgDest));
}

many:1输出

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

1
2
3
4
5
6
gulp.task('concat', function() {
  return gulp.src('lib/*.js')
      .pipe(newer('dist/all.js'))
      .pipe(concat('all.js'))
      .pipe(gulp.dest('dist'));
});

gulp-cached

1
2
3
4
5
6
7
8
9
10
11
12
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将所有文件导向下个流进行合并操作。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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);

使用效果

未开启增量编译

1
2
3
4
5
6
7
8
9
10
11
12
[18:35:26] Using gulpfile D:\blog\gulpfile.js
[18:35:26] Starting 'default'...
[18:35:26] Starting 'minifyJS'...
[18:35:26] Starting 'minifyHtml'...
[18:35:26] Starting 'minifyCss'...
[18:35:26] Starting 'minifyImgs'...
[18:35:28] Finished 'minifyJS' after 2.2 s
[18:35:29] gulp-imagemin: Minified 17 images (saved 0 B - 0%)
[18:35:29] Finished 'minifyImgs' after 3.32 s
[18:35:29] Finished 'minifyCss' after 3.66 s
[18:35:30] Finished 'minifyHtml' after 4.44 s
[18:35:30] Finished 'default' after 4.45 s

开启增量编译

1
2
3
4
5
6
7
8
9
10
11
12
[18:41:27] Using gulpfile D:\blog\gulpfile.js
[18:41:27] Starting 'default'...
[18:41:27] Starting 'minifyJS'...
[18:41:27] Starting 'minifyHtml'...
[18:41:27] Starting 'minifyCss'...
[18:41:27] Starting 'minifyImgs'...
[18:41:28] Finished 'minifyJS' after 879 ms
[18:41:28] gulp-imagemin: Minified 0 images
[18:41:28] Finished 'minifyImgs' after 889 ms
[18:41:28] Finished 'minifyCss' after 897 ms
[18:41:28] Finished 'minifyHtml' after 912 ms
[18:41:28] Finished 'default' after 916 ms