gulp4简单用法和问题总结
想做个小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值；
安装各个需要的插件
浙公网安备 33010602011771号