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:myselfgulptgulpfile.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:myselfgulptgulpfile.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:myselfgulptjsdetail.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:myselfgulpt'
[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:myselfgulpt
ode_modulesabel-preset-es2015libindex.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值；

 

 参考资料地址：

1. https://www.npmjs.com/package/gulp-rev-collector 

2. https://www.gulpjs.com.cn/docs/getting-started/creating-tasks/

安装各个需要的插件