想做個小demo，實現 css 和js的壓縮並且將多個靜態文件合並后替換index.html引入的內容，同時將index.html進行壓縮；
一 具體操作流程
1 需要先安裝gulp命令行工具
npm install --global gulp-cli
2 gulp的使用，作為開發依賴包
npm install --save-dev gulp
3 寫一些靜態測試文件，我的文件目錄如下：
// 打包前
- css
- main.css //3k
- public.css //1k 合並后--->2k
- js
- main.js //9k--->5k
- node_modules
- gulpfile.js
- index.html //14k--> 11k 注意內部引入文件路徑和html任務路徑配置要保持一致
- package.json
- README.md
// 打包后多了如下兩個文件夾
- dist
- css
- bundle-***.css
- js
- main-***.js
- rev
- css
- rev-manifest.json
- js
- rev-manifest.json
4 根目錄配置gulpfile.js文件，具體內容如下；
/*
gulp-clean-css //css壓縮
gulp-uglify //js壓縮
gulp-rev //為靜態文件隨機添加一串hash值, 解決緩存問題
gulp-clean //清除已有文件
gulp-concat //合並文件使用
//gulp-rev插件只能添加后綴, 不能講html里的路徑替換, 如果想要替換路徑, 就需要gulp-rev-collector
gulp-rev-collector //https://www.npmjs.com/package/gulp-rev-collector
gulp-babel //用於解析轉義es2015+的語法
minifyHTML //html 壓縮
如果任務（task）不返回任何內容，則必須使用 callback 來指示任務已完成。
*/
const { series, parallel, src, dest } = require('gulp');
const minify = require('gulp-clean-css'),
uglify = require('gulp-uglify'),
rev = require('gulp-rev') ,
clean = require('gulp-clean'),
concat = require('gulp-concat'),
revCollector = require('gulp-rev-collector'),
// zip = require('gulp-zip')
babel = require("gulp-babel"),
minifyHTML = require('gulp-minify-html');
function cleanD(cb) {
return src(['dist/'], {read: false})
.pipe(clean());
}
function css(cb) {
return src('css/*.css')
.pipe(minify())
// 注意此處合並后的名稱是bundle.css 在index引入就需要引入bundle.css 不能分別被引入，而且名字要一致，rev會更新hash值；有沒有其他解決方法不清楚；
.pipe(concat('bundle.css'))
// 如下會在bundle.css中間加入隨機hash值eg：bundle-3c8d7edcbf.css
.pipe(rev())
.pipe(dest('dist/css'))
// 生成對應的映射關系文件，並保存到下面的目錄
.pipe( rev.manifest() )
.pipe( dest( 'rev/css' ) )
}
function javascript(cb) {
return src('js/*.js')
// 解析es6語法
.pipe(babel(
{presets:['es2015']}
))
.pipe(uglify())
.pipe(rev())
.pipe(dest('dist/js'))
.pipe( rev.manifest() )
.pipe( dest( 'rev/js' ) )
// cb(new Error('js error'));
}
function html(){
return src(['rev/**/*.json','*.html'])
.pipe(revCollector({
replaceReved: true,
dirReplacements: {
'css': 'css',
'js': 'js'
}
}))
.pipe( minifyHTML({
empty:true,
spare:true
}) )
.pipe(dest("dist/")) //編輯好的文件
}
exports.build = series(cleanD, parallel(css, javascript, html));
二 過程中遇到的一些問題總結
1 安裝gulp時項目name不能是gulp和包同名
2 gulp3和gulp4的寫法不同，在安裝gulp v=4.*版本后在使用gulp3的寫法會報如下錯誤；
assert.js:339
throw err;
^
AssertionError [ERR_ASSERTION]: Task function must be specified
...
at require (internal/modules/cjs/helpers.js:25:18)
3 在項目開始時目錄文件為空，清理目錄文件會報錯，解決方法：可以新建一個空的dist文件夾
$ gulp build
[14:22:49] Using gulpfile D:\myself\gulpt\gulpfile.js
[14:22:49] Starting 'build'...
[14:22:49] Starting 'cleanD'...
[14:22:49] 'cleanD' errored after 22 ms
[14:22:49] Error: File not found with singular glob: D:/myself/gulpt/dist/ (if this was purposeful, use `allowEmpty` option)
...
[14:22:49] 'build' errored after 24 ms
4 在進行js壓縮時，遇到了es6的語法，會不支持而報錯；
$ gulp build [14:30:13] Using gulpfile D:\myself\gulpt\gulpfile.js [14:30:13] Starting 'build'... [14:30:13] Starting 'cleanD'... [14:30:13] Finished 'cleanD' after 31 ms [14:30:13] Starting 'css'... [14:30:13] Starting 'javascript'... [14:30:13] Starting 'html'... [14:30:13] 'javascript' errored after 92 ms [14:30:13] GulpUglifyError: unable to minify JavaScript Caused by: SyntaxError: Unexpected character '`' File: D:\myself\gulpt\js\detail.js
解決方案：安裝npm install --save-dev babel-core gulp-babel babel-preset-es2015
注意：npm包問題：
a 安裝完babel-core之后運行會報錯Error: Cannot find module '@babel/core' ，故可以直接安裝@babel/core，不用使用babel-core（兩者的區別在於@babel/core是babel-core的新版本）
b 安裝gulp-babel需要依賴babel-preset-es2015
[15:06:22] 'javascript' errored after 77 ms
[15:06:22] Error in plugin "gulp-babel"
Message:
Cannot find module 'babel-preset-es2015' from 'D:\myself\gulpt'
[15:06:22] 'build' errored after 79 ms
c 都安裝完成后還是報錯如下：
'javascript' errored after 644 ms
[15:10:09] Error in plugin "gulp-babel"
Message:
Plugin/Preset files are not allowed to export objects, only functions. In D:\myself\gulpt\node_modules\babel-preset-es2015\lib\index.js
[15:10:09] 'build' errored after 648 ms
各個插件的版本：
"@babel/core": "^7.9.6", "babel-preset-es2015": "^6.24.1", "gulp-babel": "^8.0.0",
說是版本號不兼容導致的，gulp-babel版本太高了於是我降低了一個版本，但是需要對應babel-core版本， "gulp-babel": "^7.0.0", ------對應 應該使用babel-core，經過一番調整版本后，可以成功運行了，具體版本號如下：
"babel-core": "^6.26.3", "babel-preset-es2015": "^6.24.1", "gulp-babel": "^7.0.0",
5 使用gulp-rev-collector進行靜態資源路徑替換，首次成功了，但是很多次html上沒有替換成功，發現rev創建的映射文件里的名稱已經更新了；
解決方案：沒有找到較好的解決方案，下面方法嘗試了，但是並沒有生效；
查找一些資料說：這是因為gulp-rev-collector有個bug，打開node_modules/gulp-rev-collector/index.js 第99行， 將 dirRX: escPathPattern( closeDirBySep(srcDirname))替換成: dirRX: escPathPattern( closeDirBySep(srcDirname)).replace(/'/g, ''),
替代解決方案：在不修改文件的情況下再次執行gulp build后被成功替換，即執行兩次；但是一定注意，若是文件有修改生成了新的hash值，仍然不會更新，會更新到上一個版本的hash值；
安裝各個需要的插件