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
複製代碼