当 GULP 遇上 ES6—— 该更新了

发表于 更新于 分类于 本文字数： 469 阅读时长 ≈ 1 分钟

Photo by Artem Sapegin

趁着 Hexo 3.9 升级，用 npm update 把环境升级了一波，然后就发现 gulp 挂了，这是一篇手欠升级系统环境后的填坑记录

系统环境

直接把 Hexo 根目录下的 package.json 贴上来吧

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
{
  "name": "hexo-site",
  "version": "0.0.0",
  "private": true,
  "hexo": {
    "version": "3.9.0"
  },
  "dependencies": {
    "gulp": "^4.0.2",
    "gulp-clean-css": "^4.2.0",
    "gulp-htmlclean": "^2.7.22",
    "gulp-htmlmin": "^5.0.1",
    "gulp-imagemin": "^6.0.0",
    "gulp-uglify": "^3.0.2",
    "hexo": "^3.9.0",
    "hexo-baidu-url-submit": "0.0.6",
    "hexo-deployer-aliyun": "^0.4.0",
    "hexo-generator-archive": "^0.1.5",
    "hexo-generator-baidu-sitemap": "^0.1.6",
    "hexo-generator-category": "^0.1.3",
    "hexo-generator-index": "^0.2.1",
    "hexo-generator-sitemap": "^1.2.0",
    "hexo-generator-tag": "^0.2.0",
    "hexo-related-popular-posts": "^3.0.6",
    "hexo-renderer-ejs": "^0.3.1",
    "hexo-renderer-marked": "^1.0.1",
    "hexo-renderer-stylus": "^0.3.3",
    "hexo-server": "^0.3.3",
    "hexo-symbols-count-time": "^0.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "gulp-babel": "^8.0.0"
  }
}

事情经过

系统升级后，执行 gulp 时报错：GulpUglifyError: unable to minify JavaScript，查质料得知是 gulp 解析不了 ES6 语法，网上折腾一圈使用了各种方式均无效，比如
gulp-util、babel-preset-es2015、gulp-babel,然后配置一个.babelrc的文件，最后发现其实是资料过时了:

gulp-babel 已经更新到 8.0.0，不需要再使用.babelrc 文件

解决方式

先安装新版 gulp-babel 和相关依赖：

1
npm install --save-dev gulp-babel @babel/core @babel/preset-env

然后修改 gulpfile.js，增加 gulp-babel 的引入，并在压缩 js 时增加处理步骤

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
+ var babel = require('gulp-babel');

// 压缩 public 目录 css
gulp.task('minify-css', function() {
    var option = {
        rebase: false,
        //advanced: true,               //类型：Boolean 默认：true [是否开启高级优化（合并选择器等）]
        compatibility: '*',         //保留ie7及以下兼容写法 类型：String 默认：''or'*' [启用兼容模式； 'ie7'：IE7兼容模式，'ie8'：IE8兼容模式，'*'：IE9+兼容模式]
        //keepBreaks: true,             //类型：Boolean 默认：false [是否保留换行]
        //keepSpecialComments: '*'      //保留所有特殊前缀 当你用autoprefixer生成的浏览器前缀，如果不加这个参数，有可能将会删除你的部分前缀
    }
    return gulp.src('./public/**/*.css')
        .pipe(minifycss())
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录 html
gulp.task('minify-html', function() {
    var cleanOptions = {
        protect: /<\!--%fooTemplate\b.*?%-->/g,             //忽略处理
        unprotect: /<script [^>]*\btype="text\/x-handlebars-template"[\s\S]+?<\/script>/ig //特殊处理
    }
    var minOption = {
        collapseWhitespace: true,           //压缩HTML
        collapseBooleanAttributes: true,    //省略布尔属性的值  <input checked="true"/> ==> <input />
        removeEmptyAttributes: true,        //删除所有空格作属性值    <input id="" /> ==> <input />
        removeScriptTypeAttributes: true,   //删除<script>的type="text/javascript"
        removeStyleLinkTypeAttributes: true,//删除<style>和<link>的type="text/css"
        removeComments: false,               //清除HTML注释
        minifyJS: true,                     //压缩页面JS
        minifyCSS: true,                    //压缩页面CSS
        minifyURLs: true                    //替换页面URL
    };  
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: true,
         minifyCSS: true,
         minifyURLs: true,
    }))
    .pipe(gulp.dest('./public'))
});
// 压缩 public/js 目录 js
gulp.task('minify-js', function() {
    return gulp.src('./public/js/**/*.js')

    //↓下面这些是新增的
    .pipe(babel({ 
        presets: ['@babel/env']  
    }))
    //↑上面这些是新增的

    .pipe(uglify())
    .pipe(gulp.dest('./public'));
});

// 执行 gulp 命令时执行的任务
// gulp 4.0 适用的方式
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js'
 //build the website
));

只需两步操作就解决了，再次 hexo g && gulp && hexo s 一切正常，吃一堑长一智，网络上引用资料要注意版本坏境匹配，最好是直接找官网 FAQ，可以少走许多弯路。