用gulp实现传统的多页面自动化构建，一句命令行完成混淆压缩

工作的项目，摄像头的设置页面，要求整站大小只能在100k作用，也就是说vue之类的框架，jquery库这些最好不要用，我们就用js原生语言写，并且每次写完要整站都要压缩混淆再上传，考虑到浏览器文件缓存，最好文件名都带上hash版本号。

打包这一块用哪个好呢？使用在线网站压缩？每一次，这么多个文件的代码，要一个个文件粘贴过去，再把结果复制回来，需求一改又要重来一次，太麻烦了吧。使用webpack?webpack确实是当下最火的打包工具，但在传统的多页面中用webpack配置并不是很合适，它擅长于模块化，配置文件又得写一大堆，而我们只是想用最简单的方式实现，gulp在这里成为最佳选择

gulp是基于 Node.js 构建的,利用 Node.js 流的威力,首先打开命令行工具node -v 看看有没有返回一个版本号，没有请先安装node

再安装gulp命令行工具

npm install -g gulp-cli

切换到项目目录下

cd myproject 

生成package.json文件在项目目录下创建 package.json 文件

npm init

命令将指引你设置项目名、版本、描述信息等

安装gulp，作为开发时依赖项

npm install --save-dev gulp

检查 gulp 是否安装成功，成功会返回一个版本号

gulp --version

好的，接下来在根目录下创建 gulpfile.js的文件，也就是gulp的配置文件
gulp有个很重要的概念叫任务，你可以把每个任务根据功能的不同分开写在一个函数里，可以指定任务的先后顺序，最后再组装到一块，
详细参考官网文档
https://www.gulpjs.com.cn/docs/getting-started/creating-tasks/

另外比较重要的一个点是要安装插件，不同的插件实现不同的功能，比如说gulp-htmlmin是用来压缩html的，gulp-uglify压缩混淆js的，类似于webpack里loader

npm install -D gulp-uglify gulp-htmlmin gulp-minify-css gulp-rev gulp-rev-collector gulp-clean

为了能够将源代码的es6代码转换打包成各浏览器都能兼容的代码
还要安装gulp-babel，以及@babel/core,@babel/preset-env

npm install -D gulp-babel @babel/core @babel/preset-env

gulpfile.js的配置内容

const { src, dest, series, watch } = require('gulp');
const uglify = require('gulp-uglify');
const htmlmin = require('gulp-htmlmin')
const minifyCSS = require('gulp-minify-css');
const babel=require("gulp-babel")
const rev = require('gulp-rev'); //对文件名加MD5后缀
const revCollector = require('gulp-rev-collector'); //路径替换
const clean = require('gulp-clean');
const entry = "src/" //要处理的源码文件夹
const dist = 'dist/'; //被处理后的文件保存的目录

//清除文件夹里之前的内容
function cleanBefore() {
    return src(dist, { read: false })
        .pipe(clean());
}

//html压缩
function minifyHtml() {
    var options = {
        removeComments: true, //清除HTML注释
        collapseWhitespace: true, //压缩HTML
        collapseBooleanAttributes: true, //省略布尔属性的值 <input checked="true"/> ==> <input />
        removeEmptyAttributes: true, //删除所有空格作属性值 <input id="" /> 
        minifyJS: true, //压缩页面JS
        minifyCSS: true //压缩页面CSS
    };
    return src(entry + '*.html')
        .pipe(htmlmin(options))
        .pipe(dest(dist));
}

//css压缩,将源码文件夹内的css文件夹下的所有css压缩，并生成文件名带hash随机值的新文件保存在dist的css目录下
function minifyCss() {
    return src(entry + 'css/*.css')
        .pipe(minifyCSS()) //压缩css
        .pipe(rev()) //文件名加MD5后缀
        .pipe(dest(dist+'css/')); //输出到css目录
        .pipe(rev.manifest('rev-css-manifest.json')) ////生成一个rev-css-manifest.json
        .pipe(dest('rev')); //将 rev-css-manifest.json 保存到 rev 目录内
}

//js压缩,将源码文件夹src内的js文件夹下的所有js文件压缩混淆，并生成文件名带hash随机值的新文件保存在dist的js目录下

function minifyJs() {
    return src(entry + 'js/*.js')
        .pipe(babel({
            presets: ['@babel/preset-env']
        }))
        .pipe(uglify()) //压缩js到一行
        .pipe(rev()) //文件名加MD5后缀
        .pipe(dest(dist+'js/')) //输出到js目录
        .pipe(rev.manifest('rev-js-manifest.json')) ////生成一个rev-js-manifest.json
        .pipe(dest('rev')); //将 rev-js-manifest.json 保存到 rev 目录内
}

//打包图片
function movePic() {
    return src(entry + 'img/*').pipe(rev()).pipe(dest(dist + 'img/')).pipe(rev.manifest('rev-img-manifest.json')) //生成一个rev-img-manifest.json
        .pipe(dest('rev')); //将 rev-img-manifest.json 保存到 rev 目录内;
}


//使用rev-collect将在html引入的资源路径也替换成md5文件名
function srcReplace() {
    //html，针对js,css,img
    return src(['rev/*.json', dist+'*.html'])
        .pipe(revCollector({replaceReved:true }))
        .pipe(dest(dist));
};

exports.default = series(cleanBefore, minifyHtml, minifyCss, minifyJs, movePic,srcReplace); //组合任务

最后在命令行里执行gulp xxxx(exports的任务名字,比如导出时使用exports.mybuild,xxxx就是mybuild)，如果是用exports.default导出任务直接gulp,执行完成后直接在dist目录里看到压缩好的文件啦