前端构建系统 Gulp 的使用与常用插件推荐 - 上篇

https://zhuanlan.zhihu.com/p/24975955

随着 Web 前端发展，前端项目变得越来越复杂，随之而来的是各种方便的工具：打包工具、转码工具、 JS 与 CSS 的合并压缩工具等等。这些工具极大的提高了我们前端的代码质量，但问题也随之而来：

这么多工具到底该怎么使用，难道一个个在各个工具中来回切换复制粘贴？或是在 CLI 里一条条地敲命里吗？敲完代码还要敲一堆的构建命令，说不准顺序搞错了还要功亏一篑重来一遍？纳尼？！！

于是构建系统应运而生，Gulp, Grunt, Browserify, etc.

使用构建系统的好处显而易见，就是一次配置，自动构建，省心省力妙不可言（怎么像广告词 orz）

此外因为配置文件的高度统一，这个配置文件几乎可以多个项目之间随便复制粘贴修修改改就可以重复使用！

不过可用的构建系统有很多，为避免引起圣战这里不做讨论 _(:зゝ∠)_，我就用 Gulp ~

好嘞，废话说了这么多，下面进入正文：

由于篇幅稍长，可能对移动端阅读体验不太好，拆成两篇发好嘞
本篇内容:

1. Node 与 Gulp 的安装
   
2. 为静态文件添加 MD5 指纹
   
3. 生成 Source Map
   
4. 静态文件的合并与压缩

Node 与 Gulp 的安装

参考：从零开始：现在开始用ES6写代码，使用 Babel 对 ES6 进行转码也就不在这里啰嗦嘞~

为静态文件添加 MD5 指纹

使用 Gulp 自动对 HTML 中引用的静态文件添加 MD5 指纹戳，有效解决旧文件缓存，新文件无法更新的问题。

这部分有两种解决方案

1. 将 MD5 指纹写入文件名

- 效果：<script src='BearD01001-366dc531e1.min.js'></script>

- 优点：几乎可完美规避更新时短时间内客户端请求结果不一致的问题

- 缺点：每次修改文件都会产生一个新文件，易造成文件冗余

- 建议：推荐流量大、或没有绝对高峰期只有相对高峰期的大型 Web 系统使用

- 插件：gulp-rev

2. 写至文件引用 URI 的 query 中

- 效果：<script src='BearD01001.min.js?rev=366dc531e1'></script>

- 优点：每次更新不会产生新文件，有效避免文件冗余

- 缺点：更新时短时间内，客户端请求到的静态文件可能不一致，造成非预期结果

- 建议：推荐流量小、或可规避高峰期更新的 Web 系统使用

- 插件：gulp-rev-append

两种解决方案优缺点已经说明，两个插件的使用方法也很简单，直接 pipe 到插件中就 OK ，这里不多废话嘞~

    var gulp = require('gulp');    var rev  = require('gulp-rev');    // var revAppend = require('gulp-rev-append');    gulp.task('html', () => {        gulp.src('*.html')            .pipe(rev())            // .pipe(revAppend())            .pipe(gulp.dest('./'));    });

生成 Source Map

说到 Source Map 可能会有些小伙伴儿有些陌生，说白了这货就是在转码编译之前的文件与之后的文件生成一个字符对照表（深入了解参考 >> JavaScript Source Map 详解）。

这样在浏览器开发者工具中，只要开启 sourcemaps ，调试过程中就可以在开发者工具中直接看到编译前的源文件，而不是编译后的文件。

如果出现问题也是直接报出问题出在源文件的哪行哪列，Debug 起来相当方便！

• 插件

- gulp-sourcemaps

• 简介

额(⊙_⊙)...上边好像说的差不多了

• 使用

1. 一般使用方法（不推荐）

    gulp.task('javascript', () => {        gulp.src('src/**/*.js')            .pipe(sourcemaps.init())                .pipe(plugin1())                .pipe(plugin2())            .pipe(sourcemaps.write())            .pipe(gulp.dest('dist'));    });

不推荐的原因是 gulp-sourcemaps 插件默认会将文件对照表信息全部写入转码编译后的文件末端。

一般这个对照表的信息量还是很大的，这对生产线上浏览器请求加载文件无疑是无用额外的开销，手动去除也是一件很低效费时的工作。

2. 指定输出路径（推荐）

    gulp.task('javascript', () => {        gulp.src('src/**/*.js')            .pipe(sourcemaps.init())                .pipe(plugin1())                .pipe(plugin2())            .pipe(sourcemaps.write('_srcmap'))            .pipe(gulp.dest('dist'));    });

这里在 sourcemaps.write() 中传入了一个字符串 _srcmap，用来指定 Source Map 即对照表的存储路径。

这样指定输出路径之后，文件编译转码完只会在最后一行只会写入对 Source Map 的文件引用，而 Source Map 对照表本身会被输出到指定的路径下：

//@ sourceMappingURL=_srcmap/BearD01001.js.map

这样在开启浏览器开发者工具后，开发者工具就会自动去匹配 Source Map 了。

而生产线上则完全不用担心

1. 谁会把 Source Map 文件放到生产线上？

2. 即使真的放上了，如果开发者工具未打开，浏览器也不会去加载这个文件。

静态文件的合并与压缩

JS、CSS文件的合并压缩应该是产品上线前最常见的需求了。

不再需要你在各个 JS / CSS 压缩合并的工具中切来切去，也不需要你在各个 IDE 或是 Editor中复制粘贴手动拼接合并，这些繁琐低效的工作正是 Build System 要帮你解决的！

接下来要介绍的这几个插件都非常常用，也有许多文章介绍了使用方法，就不多加说明了，动动手搜一搜吧！

JS 的压缩

• 插件

- gulp-uglify

• 简介
  

使用 UglifyJS 压缩 JS 文件

CSS 的压缩

• 插件
  

- gulp-clean-css

！注意！ 搜索 CSS 压缩工具的时候极有可能搜到 gulp-minify-css，该插件已被弃用

• 简介
  

使用 clean-css 压缩 CSS 文件

JS / CSS 的合并

JS 或 CSS 文件的合并都是使用同一款插件 gulp-concat。

• 插件
  

- gulp-concat

• 简介
  

合并 JS 或 CSS 文件

好嘞，上篇就整理好了，希望对你有所帮助。

如有问题，欢迎提出指正。（吐槽：破乎啥时候能支持 Markdown？！）

下篇内容概要：

1. 文件重命名
   
2. 自动合并雪碧图
   
3. 小图标转码为内联 base64
   
4. 构建异常捕获
   
5. 使用 watch 插件提高构建效率
   
6. 其他提高构建体验的插件