总结18年12月Gulp增量编译优化

实习时候,有一天,照常进行开发的时候,在等待项目运行gulp构建命令之后,等待着构建的完成…

这时候导师看了一眼,说:“是不是觉得很慢咧,能优化一下就好了,之前也试过,但是没有弄成功”。

是呀,每次十几秒的等待,真的是很漫长的咧
gulp增量编译3.png

也就是这样一句话,我想闲下来的时间可以试一试嘛,反正近期需求也不会太过忙碌,而且Gulp相关的命令也不算多,也就是如此,开始了Gulp的重新复习。

开始啦~

先分析了项目的gulpfile.js构建过程

gulp增量编译1

可以看到项目原先进行了gulp.task的控制,并将依次进行arrTask中的任务

而在’clean_build’中,gulp将会清空build打包后的文件,这是不行的,因为我们建立起来的增量编译逻辑是:

1
我们需要与未做改变的文件进行比较,然后判断我们是否修改了该文件,如果是,则将进行该文件的处理,如果不是,那我们就不需要处理该文件,这样便可以省去很多重复处理的时间

接下来我们抽出一段公共代码分析与查看其构建原理

1
2
3
4
5
6
7
8
9
gulp.task('css_comm', function() {
return gulp.src(['1.css','2.min.css','3.css','4.css'])
.pipe(concat('5.css')) // 合并common.css
.pipe(rev()) // 加MD5后缀
.pipe(cleanCss()) //压缩css
.pipe(gulp.dest('./build/css')) // 压缩完
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/css'));
});

看完代码,那时候就想嚯,要是我们初步在每一次合并,未加MD戳之前,以及未经压缩等操作前对上一次的构建文件进行比较,那么我们就可以抉择出是否继续对该文件进行构建,这样就可以达到我们自动识别构建的目的了。

因此新建了一个beforebuild文件夹作为中转文件夹用于压缩,加戳之前进行的比较作用

gulp增量编译4

gulp增量编译5

于是寻找相应是否有实现此比较功能的gulp包,在npm上找到一个gulp-changed
其用法如下:

1
2
3
4
5
6
其中的hasChanged可以根据下列三项做比较
changed.compareLastModifiedTime
changed.compareContents
changed.compareSha1Digest (Deprecated)

可以对内容,最后修改时间等方式对文件作比较,从而判断是否修改过文件。

修改:
1
2
3
4
5
6
7
8
9
10
11
gulp.task('css_comm', function() {
return gulp.src(['1.css','2.min.css','3.css','4.css'])
.pipe(concat('5.css')) // 合并common.css
.pipe(changed('./beforebuild/6.css',{hasChanged: changed.compareLastModifiedTime})) //对比中转beforebuild中的6.css
.pipe(gulp.dest('./beforebuild/6.css')) // 先输出一遍
.pipe(rev()) // 加MD5后缀
.pipe(cleanCss()) //压缩css
.pipe(gulp.dest('./build/css')) // 压缩完
.pipe(rev.manifest())
.pipe(gulp.dest('./rev/css'));
});


关键之处在于添加了此两行对比代码:
1
2
3
4

.pipe(changed('./beforebuild/6.css',{hasChanged: changed.compareLastModifiedTime})) //对比中转beforebuild中的6.css

.pipe(gulp.dest('./beforebuild/6.css')) // 先输出一遍


changed根据先前输出的文件的最终修改时间进行比较文件是否改变

而如果有改变,再输出覆盖beforebuild中的6.css,同时继续执行后续压缩,加戳等命令,从而输出到build文件中的6.css


最终将相关指令划分为default、dev,用于区分开发环境,生产环境中所用不同。因为生产环境中需要执行’clean_build’指令中的所有文件清除过程。
gulp增量编译8

依次对项目gulp中的文件如此处理,最终将构建均速由15s降低至4s


前后对比:

gulp增量编译3

gulp增量编译6

至此,gulp的增量编译初步完成。
后续仍然有一些代码优化的空间在,所以并不认为这是最终的优化结果。

加油!

附上在gulp中文网,查看到的gulp增量编译,官方使用watch与cache进行的增量处理。

Gulp增量编译: gulp增量编译

gulp增量编译9