gulp4增量编译

栏目: 编程工具 · 发布时间: 6年前

内容简介:在任何构建工具中增量编译都是一个必不可少的优化方式。即在编译过程中仅编译那些修改过的文件,可以减少许多不必要的资源消耗,也能减少编译时常。而且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);

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Eric Meyer on CSS

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》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

在线进制转换器
在线进制转换器

各进制数互转换器

URL 编码/解码
URL 编码/解码

URL 编码/解码