gulp4增量编译

更多内容欢迎来到博客 ：https://imjianjian.github.io

在任何构建工具中增量编译都是一个必不可少的优化方式。即在编译过程当中仅编译那些修改过的文件，能够减小许多没必要要的资源消耗，也能减小编译时常。并且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函数，在运行两次任务之间过滤掉未更改的文件：

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-changed只支持一对一的文件更新，相似gulp-concat这样合并文件的操做，会有文件内容缺失。

gulp-newer

1:1输出

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就会把他输出到下个流。

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);
复制代码

使用效果

未开启增量编译

[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
复制代码

开启增量编译

[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
复制代码