项目打包

打包之前可以将服务器部分以及监听部分的代码全部删除，要将编译模式改为生产模式（js部分）

function compileJs(){
    return src('./src/js/app.js')
    .pipe(webpackStream({
        //指定编译的模式，development 开发模式，production :生产模式，压缩，优化
        mode:"production",
        devtool: "inline-source-map",

1、在gulpfile文件中进行操作，提前复制两个，分别命名 gulpfile.pro.js(生产用) gulpfile.dev.js(研发用)

2 、下载三个插件

npm i del -D 每次更新文件将前面的dist目录删除后重建

npm i gulp-rev -D 生成带有hash的文件名

npm i gulp-rev-collector -D 对html模板的引入资源进行替换（替换成带有hash文件名的资源）

3、漏了一个 再此之前可以在package.json中配置一个快捷方式

"dev": "gulp -f ./gulpfile.dev.js ",
"build": "gulp -f ./gulpfile.pro.js"

执行npm run build 就打包完成了，自动生成一个dist（名字自定义）目录

4、确认一下html页面引用的静态资源名字是否替换
利用 .pipe(rev.manifest(‘css-rev-manifest.json’)) 生成的json文件 里面存放的就是需要替换的css js目标文件以及对应的含有hash值的文件名

5 具体代码实现：

const del = require('del');
const rev = require('gulp-rev');
const revCol = require('gulp-rev-collector');



function compileCss(){
    return src('./src/style/**/*.scss')
    .pipe(sass())
    .pipe(concat('all.css'))

    //js部分也需要同样的操作，只需要把 manifest的文件名改下即可
    //生成带有hash值的文件名
    .pipe(rev())
    //目录要全部进行更改，本例改为dist
    .pipe(dest('./dist/'))
    //生成json配置文件
    .pipe(rev.manifest('css-rev-manifest.json'))
    //执行json文件存储的文件路径
    .pipe(dest('./rev/'))
}


删除函数 remove 这个要放在最前面
exports.default = series(remove,parallel(copyLibs,compileHtml,copyImages),compileJs,compileCss,revColl);
function remove(){
    return del('./dist/')
}

修改模板的静态资源引用 revColl 放在最后面
function revColl() {
    return src(['./rev/*.json', './dist/*.html'])
      .pipe(revCol())
      .pipe(dest('./dist/'))
  
}
exports.default = series(remove,parallel(copyLibs,compileHtml,copyImages),compileJs,compileCss,revColl);

以上都配置完毕后，可以使用nginx进行代理设置，我的前一篇文章有说明nginx的部署，window下部署nginx