首页 > 技术文章 > gulp4简单用法和问题总结

xhliang 2020-05-26 15:12 原文

想做个小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值;

 

 参考资料地址:
1. https://www.npmjs.com/package/gulp-rev-collector 
2. https://www.gulpjs.com.cn/docs/getting-started/creating-tasks/

安装各个需要的插件

推荐阅读