gulpfile.js 之 优化项目总结

本文所述，一个老旧gulp前端原生项目（html,js,css）的基础上进行改造的，本文章是在对改造过程中各个阶段遇到的问题以及解决方式进行的一个总结。
文档目录结构如下：

目录.png

最初问题1

老项目的gulpfile.js 中的build代码部分是对src下所有文件的build处理，最开始时候项目文件较少，build速度较快，但随着业务扩大，项目文件也逐渐增多，导致build耗时越来越长，平均耗时3分钟左右，严重影响开发效率。

old.jpg

解决方法1：

思路： 由于每次build都要遍历处理所有文件，但是需要处理的真正 改动文件 是很少的，所以思路就是，过滤掉没有变动的文件，只处理改动的文件。

方法： 使用 gulp-changed 插件，过滤没有变动的文件。由于老项目的build代码任务入口有很多，所以需要在所有处理文件的入口处都加入 gulp-changed。

new.jpg

原理： 保留原来build过程中的 .dist 目录，作为build代码的缓存目录，每次build会对比src与.dist目录下同名文件的最近修改时间，只有最新修改时间晚于上次.dist缓存的文件修改时间时，才会通过管道进入到下一个pipe。

gulp.src(['./src/**'])
    .pipe(changed(DEST))
    .pipe(gulp.dest(DEST))

解决方法2：

思路：每次build可以指定只build某个文件夹。

方法： 使用 node 的环境变量 process.env.NODE_ENV 传参给gulp， 每次可以指定需要build的文件夹。build过程与全局build一样。

gulp.task("obuild", function(callback) {
  gulp.src(["./src/" + options.env + "/**"])
    .pipe(gulpif(["*.css", '**/*.css'], minifyCss()))
    .pipe(gulpif(["*.js", "**/*.js"], uglify()))
    .pipe(gulp.dest("./.dist/" + options.env ))

only.png

最初问题2

不同电脑，Mac，每次build代码使用 gulp-rev 添加的hash值会有所变动，导致变动文件过多。

思路：不同电脑，build同一个文件使用 gulp-rev 添加hash值不同的原因，是处理文件的顺序不同。

方法： 在处理文件入口处加入 gulp-sort 插件，来对内存中的文件排序之后再往下pipe，调用gulp-rev。

gulp.src(['.dist/**/*.*(js|css|jpg|png|webp|gif|jpeg'])
    .pipe( sort() )
    .pipe( rev() )
    .pipe( gulp.dest('dist') )

延伸问题

针对“问题1”，添加的两种方式，全局build 和 单个文件夹build，要做到相互不影响。

方法： 全局build，按照原有方案进行。单个build，为了不影响全局build出的dist文件，需要增加只删除dist目录下指定文件夹逻辑。并且生成自己的rev-manifest.json，以替换自己文件夹下文件的hash值，但是为了保证单个文件夹下也可以引入外部全局下的js或者css文件，全局生成的rev-manifest.json不能删除，以保证在build单个文件夹时能够先使用全局生成的json文件替换引用的全局文件。

不足之处

1、对于问题1的第一种方法，使用gulp-changed插件实则对比文件的最近修改时间，多人协作开发工程中可能会出现电脑系统时间不一致的问题。所以，多人协作开发前，请保证每个电脑的系统时间都同步为网络时间。
2、对于问题2，使用的gulp-sort插件，实则是当gulp任务开始后，排序的是内存中的文件，可能出现windows 与 Mac之间内存处理机制不一致导致hash值不一致的问题。所以多人开发时尽量保证使用同样的电脑。

总结：

本次项目优化，共有下面几点成效：

1. 原本耗时将近3分钟的全局build任务，现在耗时只为 20s 左右。
2. 原本多人使用Mac开发，build代码生成的文件hash值不同的问题，得到解决。
3. 增加单个文件夹文件build任务，可以高效提高开发效率。