使用gulp对完成的项目进行最后打包操作 gulp-rev gulp-rev-collector

前言

在一个项目开发完成后，我们需要对代码进行压缩打包，并且将开发环境的代码跟生产环境中的代码区分开。除此之外，还要注意浏览器的缓存问题，如果更改了css文件或者是js文件，浏览器在打开项目的时候依然会先从本地缓存中读取这些外部引用的文件，导致更改的文件没有生效，看不到效果。为了解决这个问题，保证每次更改文件后，浏览器总是能去获取最新的文件，我们可以使用 gulp-rev 和 gulp-rev-collector这两个插件来完成这个效果。

打包前的准备（一）

如果是第一次使用gulp的小伙伴，可以点击查看 gulp 的基本使用，这里我们直接开始讲关于打包的操作。

del

我们在每次打包的之前，最好是将之前打包出来的文件清空，防止有冗余文件的产生，确保文件不会有问题。可以使用 del 插件来操作删除文件。

安装

npm install del --save-dev
//或者使用yarn
yarn add del -D

语法

del( 目标文件/目标路径 )，参数可以是文件名称，或者是文件路径，当需要删除多个文件时，以数组的方式传入。

del('./js/*.js');//删除js目录下所有js文件
del(['./js/*.js','./css/*.css']);//删除js目录和css目录下的所有文件
del('/dev/');//删除dev目录及下面所有的子文件

使用

在gulpfile.js文件中使用。

const rev=require("gulp-rev");
function remove(){
    return del("./dev/")
}
exports.default = remove;

gulp-rev，gulp-rev-collector

为了防止浏览器读取缓存文件，我们需要在css/js文件名后添加hash值，同时在html文件中要引入对应的css/js文件，使用以下两个插件来完成这个功能。

• gulp-rev 的作用是在css/js文件名后添加hash值，并生成map文件，当文件内容有更改时，打包后的文件名的hash值会自动改变，同时map文件也会自动更新。
• gulp-rev-collector 的作用是按照生成的map文件，在html文件中引入对应的css/js文件。

安装

npm install --save-dev gulp-rev gulp-rev-collector
//或者使用yarn
yarn add gulp-rev gulp-rev-collector -D

语法

.pipe(rev());，在文件名后面添加hash值。

在文件输出前使用，使用后，我们可以看到输出的目录中，css文件名后面添加了一串hash值。

.pipe(rev.manifest())，生成map文件。

可以传一个参数，为其指定其他路径或文件名。如果不填的话，默认生成的文件名为rev-manifest.json。

css-rev-manifest.json 文件内容如下：

注意：如果参数为空的话，第二次生成的 rev-manifest.json 将覆盖之前生成的文件。如果要想实现多个rev-manifest.json自动合并，可以设置 merge:true。

const rev=require("gulp-rev");
.pipe(rev.manifest({
    base:"./rev/",  //输出的路径
    merge:true  //与现有的map文件合并（如果存在）
}))

.pipe(revColl())，按照map文件，替换html模板中引入的文件地址。

按照rev目录里所有的map文件，替换dist目录下html模板中的链接。

const revColl=require("gulp-rev-collector");
function revCollector(){
    return src(["./rev/*.json","./dist/*.html"])
    .pipe(revColl())
    .pipe(dest("./dist/"))
}

参数说明：

• replaceReved，替换html文件中已被替换的链接。默认值为false。如果每次打包前，是将html文件先删除，再重新打包输出的话，这个属性就不需要再设置了。
• dirReplacements，指定替换的目录路径。gulp-rev创建的map文件中，不包含有关目录的任何信息。

.pipe( revCollector({
    replaceReved: true,
    dirReplacements: {
        'css': '/dist/css',
        '/js/': '/dist/js/',
    }
}) )

例如，如果使用上面的 dirReplacements参数，生成的map文件内容如下：

"/css/style.css" => "/dist/css/style-1d87bebe.css"
"/js/script1.js" => "/dist/script1-61e0be79.js"

使用

这里我们用打包css文件来举例，其它文件的操作跟这个相同。

gulpfile.js文件中

const {src,dest} = require("gulp");
const sass = require("gulp-sass");//编译sass文件
const concat = require("gulp-concat");//合并
const rev=require("gulp-rev");//生成hash map
const revColl=require("gulp-rev-collector");//更新html中 文件引入的路径
function compileCss() {
    return src("./src/style/**/*.scss")
        .pipe(sass().on("error", sass.logError))
        .pipe(concat("all.css"))
        .pipe(rev())//在文件名后面添加hash值
        .pipe(dest("./dist/"))
        .pipe(rev.manifest("css-rev-manifest.json"))//生成map文件
        .pipe(dest("./rev/"))//map文件的输出地址
}
function revCollector(){
    return src(["./rev/*.json","./dist/*.html"])
    .pipe(revColl())//按照上面rev目录下的map文件，替换html中的链接
    .pipe(dest("./dist/"))//html输出的地址
}
exports.default = series(compileCss,revCollector);

打包前的准备（二）

有关文件的问题解决了，接下来我们来看配置文件的问题。

在项目中，我们会使用到 gulpfile.js 配置文件，在开发环境和生产环境中，这个文件的内容是有变化的，为了打包后不影响本地调试，我们可以将gulpfile.js 文件复制一下，分成开发版（pro）和生产版（dev）。

项目目录如下：

在这里，我简单对比一下gulpfile.dev.js 和 gulpfile.pro.js 的区别：

可以看到，生产环境中不需要我们再搭建本地服务器，也不需要监听文件的修改，执行浏览器的热更新，所以这部分内容可以删除。包括操作js文件使用的webpack-stream插件，mode要改成production、devtool 调试工具也要删掉。

更改完文件名后，再次启动服务的时候，我们需要使用 gulp -f命令，设置启动的配置文件。

gulp -f ./gulpfile.dev.js
gulp -f ./gulpfile.pro.js

同样地，我们可以将这两个命令添加到package.json 的脚本中，做一个快捷方式。这样我们就可以通过以下命令快速启动了。

npm run dev / npm run build
或者
yarn dev / yarn build

打包

上述的工作完成后，我们就可以开始打包了，在命令行中执行yarn build，进行打包，打包成功如下图，可以看到打包后的文件大小。

注意：

• 打包后的单个文件大小，不能超过 244kb ；
• 打包时，尽量减少项目中 import 导入的插件数，因为import 导入的文件都会被打包，关于外部库的引用，可以直接用script 标签；

一些跟 gulp-rev 相关的插件：

• gulp-rev-rewrite，重写已重命名的文件名；
• gulp-rev-css-url，用修订后的URL覆盖CSS文件中的URL；
• gulp-rev-outdated，旧的静态资产修订文件过滤器；
• gulp-rev-collector，静态资产修订数据收集器；
• rev-del，删除旧的未使用资产；
• gulp-rev-delete-original，在rev之后删除原始文件；
• gulp-rev- loader，将rev-manifest与webpack一起使用；
• gulp-rev-format，提供静态资产的哈希格式选项（前缀，后缀，最后扩展名）；