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
相关推荐
星辰的笔记 2020-07-04
liangjielaoshi 2020-06-11
zhongweinan 2020-06-10
jiangfulai 2020-04-18
UndefineOrNull 2020-02-29
我有一只小松鼠 2020-02-29
UndefineOrNull 2020-03-01
hlihaihong 2020-02-18
UndefineOrNull 2020-02-12
yinuoqingqin 2020-01-13
星辰的笔记 2020-01-13
UndefineOrNull 2020-01-13
hlihaihong 2020-01-13
kaosini 2020-01-12
hlihaihong 2020-01-12
kaosini 2020-01-12
HSdiana 2019-12-25