gulp新一代前端构建利器-前端项目构建工具有什么

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

这么多工具怎么用，是否可以在各个工具之间来回切换复制粘贴？ 还是在 CLI 中输入命令行？ 输入代码后，您必须输入一堆构建命令。 也许顺序错了，你必须重新做一遍？ 纳尼？ ！ ！

于是构建系统应运而生，Gulp、Grunt、Browserify等。

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

另外，由于配置文件的高度统一性，这个配置文件可以在多个项目之间通过复制粘贴修改修改的方式复用！

但是，有许多可用的构建系统。 为了避免圣战，这里就不讨论了_(:зゝ∠)_，我会用Gulp~

好了，废话少说gulp新一代前端构建利器，进入正文：

由于文章篇幅较长，可能对移动端的阅读体验不是很好，所以分成两篇贴上来。

本文内容：

安装 Node 和 Gulp

为静态文件添加MD5指纹

生成源映射

静态文件的合并和压缩

安装 Node 和 Gulp

参考：如果你用Babel转码ES6，这里就不啰嗦了~

为静态文件添加MD5指纹

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

这部分有两种解决方案

1.将MD5指纹写入文件名

- 影响：

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

- 缺点：每次修改一个文件，都会生成一个新的文件gulp新一代前端构建利器，容易造成文件冗余

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

- 插件：gulp-rev

2.写入文件引用URI的查询

- 影响：

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

- 缺点：在更新过程中的短时间内，客户端请求的静态文件可能不一致，导致意想不到的结果

- 建议：建议使用低流量的web系统或避开更新高峰期

- 插件：gulp-rev-append

两种方案的优缺点已经说明，两种插件的使用也很简单。 直接管到插件里就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，有些朋友可能有点陌生。 说白了，这个产品就是在转码和编译之前，生成一个文件之间的字符对照表（详见>>）。

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

如果有问题，会直接报出问题出在源文件的哪一行哪一列，调试起来非常方便！

-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 或编辑器中手动复制、粘贴和合并。 这些繁琐低效的工作，正是 Build System 帮你解决的。 的！

下面要介绍的几个插件都是很常用的，介绍使用方法的文章也很多，就不多说了，大家自己搜一搜吧！

JS的缩小

-gulp-uglify

使用 UglifyJS 压缩 JS 文件

CSS的缩小

-gulp-clean-css

！ 注意！在搜索 CSS 压缩工具时，很有可能会找到 gulp-minify-css，该工具已被弃用

使用 clean-css 缩小 CSS 文件

JS/CSS 合并

使用相同的插件 gulp-concat 合并 JS 或 CSS 文件。

-gulp-concat

合并 JS 或 CSS 文件

好了，最后一部分整理完毕，希望对大家有所帮助。

如果您有任何问题，请指正。 （吐槽：Pohu什么时候支持Markdown？！）