内容简介:在任何构建工具中增量编译都是一个必不可少的优化方式。即在编译过程中仅编译那些修改过的文件,可以减少许多不必要的资源消耗,也能减少编译时常。而且gulp是一个配置简单,学习性价比很高的工具。在gulp官方推荐了四个插件用于增量编译:gulp4提供了lastRun函数用于获取上次运行任务的时间。
在任何构建 工具 中增量编译都是一个必不可少的优化方式。即在编译过程中仅编译那些修改过的文件,可以减少许多不必要的资源消耗,也能减少编译时常。而且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);
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- 有赞 Android 编译进阶之路 —— 增量编译提效方案Savitar
- Unity引擎iOS增量编译方法解析
- Kotlin 1.1.60 发布,开始支持增量编译
- Rust 1.52.1 发布,默认禁用增量编译
- Kotlin 1.2.70 发布,增量编译速度提高 7 倍
- 关于IL2CPP在Xcode下增量编译
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Eric Meyer on CSS
Eric Meyer / New Riders Press / 2002-7-8 / USD 55.00
There are several other books on the market that serve as in-depth technical guides or reference books for CSS. None, however, take a more hands-on approach and use practical examples to teach readers......一起来看看 《Eric Meyer on CSS》 这本书的介绍吧!