ブログへようこそ:https://imjianjian.github.io

どのコンストラクションツールでもインクリメンタルコンパイルは欠かせない最適化方法です.すなわち,コンパイル中に修正されたファイルのみをコンパイルすることで,多くの不要なリソース消費を低減し,コンパイルの時々を低減することができる.またgulpは構成が簡単で、学習性の価格比が高いツールです.

プラグイン

gulpでは、インクリメンタルコンパイルのために4つのプラグインが推奨されています.

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()

gulp 4は、最後に実行されたタスクを取得するためのlastRun関数を提供する.
gulpを用いることができる.src関数のsinceとgulp.LastRun関数は、2回のタスクを実行する間に変更されていないファイルをフィルタします.

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タスクの時間を節約するだけです.
2回の変更間の変更を比較するには、gulp-changedとgulp-newerの2つのプラグインを使用する必要があります.両者の違いはgulp-changedがファイルの生成と変更の時間を比較することで、変更したファイルを次のストリームに送るだけで、その後ファイルのマージが存在するとファイルが欠落します.したがってgulp-changedは1対1の操作にのみ適している.複数対1の場合は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のようなプラグインは、複数のファイルを1つに結合します.この場合、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と組み合わせて、変更したファイルを再構築したいだけで、対流中のすべてのファイルを操作する必要がある場合に便利です.
次の例では、すべてのファイルを1つのファイルにマージする場合、ストリームの前期に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