使用gulp打包发布代码

• 在发布代码之前，可以对代码进行优化：

1. 压缩
2. 合并
3. 增加版本号等等…

这样的话，在线上的文件就会比较小，提高用户的下载速度，为用户节省带宽。压缩后的代码也不容易被其他人一眼看出来是什么作用，这样也能起到一些保护知识产权的作用。

一般来说，现在常用主流的3个工具：

1. Grunt
2. Gulp
3. Webpack

这里我们用 gulp写一个简单的页面代码的打包发布流程：

首先我们需要安装gulp与对应所需的插件

npm install --global gulp-cli

npm install --save-dev gulp

npm install gulp-rev gulp-rev-replace gulp-useref gulp-filter gulp-uglify gulp-csso --save-dev

安装完毕后，我们在项目的根目录下创建一个文件gulpfile.js（gulp的所有任务需要定义在这个文件中），创建一个名为dist的文件夹（用于接收打包完成后的代码）。

这里附上gulpfile.js的一个简单处理流程：

// 首先，申明依赖的加载项
var gulp = require("gulp");
var rev = require("gulp-rev"); // 插件：给每个文件添加版本号 通过计算所得的HASH码修改文件名
var revReplace = require("gulp-rev-replace");
var useref = require("gulp-useref"); // 插件作用：自动合并,自动打包代码
var filter = require("gulp-filter"); // 过滤代码：在代码运行过程中将某些代码过滤出来 
var uglify = require("gulp-uglify"); // 压缩JS代码的插件
var csso = require("gulp-csso"); // 压缩CSS代码的插件

gulp.task("default", function () {
    var jsFilter = filter("**/*.js", { restore: true }); // 获取到所有js文件
    var cssFilter = filter("**/*.css", { restore: true }); // 获取到所有css文件
    var indexHtmlFilter = filter(["**/*", "!**/index.html"], { restore: true }); // 获取到所有除了index.html(入口文件)之外的所有文件

    return gulp
        .src("src/index.html") // src -- 拿到需要处理的文件-index
        .pipe(useref()) // 第一步处理：分析并拿到<build>注释标识中的每一个文件      Concatenate with gulp-useref
        .pipe(jsFilter) // 第二步处理：从流中，筛选出所有js文件
        .pipe(uglify()) // 第三步：压缩筛选出的JS文件      Minify any javascript sources
        .pipe(jsFilter.restore) // 第四步：将压缩好的JS文件放回归到流中
        .pipe(cssFilter) // 第五步：从流中，筛选出所有css文件
        .pipe(csso()) // 第六步：压缩筛选出的css文件     Minify any CSS sources
        .pipe(cssFilter.restore) // 第六步：将压缩好的css文件放回归到流中
        .pipe(indexHtmlFilter) // 第七步：筛选出 除了index.html(入口文件)之外的其他所有文件
        .pipe(rev()) // 第八步：为文件生成 HASH版本号和文件名      Rename the concatenated files (but not index.html)
        .pipe(indexHtmlFilter.restore) // 第九步：将第八步 -- 生成完成之后的所有文件回归到流中
        .pipe(revReplace()) // 第十步：把index.html中，对于文件的引用，替换新文件名      Substitute in new filenames
        .pipe(gulp.dest("dist")); // 流的最后，将流中处理完成之后的代码放入dist文件夹中。作为发布版本。
});

当然，gulp各种各样的插件还能实现很多眼花缭乱的功能。一般来说，一旦我们写好gulp的任务，在一个项目的生命周期中很少会去改变，属于一个一劳永逸的事情。所以很有必要花点时间抒写一个完美适用的gulpfile.js文件。这里的gulpfile.js可以作为一个种子，大家可以根据在这个文件的基础之上，自己去编写自己适用的gulpfile文件。