gulp-huglify ES6 报错

使用 gulp-huglify 直接压缩 es6 时会报错,因此需要结合babel进行转码。

使用的工具是 gulp-babel

关于 gulp-babel 更多的内容可以看:github - babel/gulp-babel

使用 gulp-babel

gulp-babel 是 gulp 的插件,同样的是基于流进行操作,因此直接在 gulpfile.js 中引用即可。

需要安装如下:

babel-preset 是肯定要安装的,具体需要那些preset就安装那些即可

npm install --save-dev gulp-babel
npm install --save-dev babel-preset-es2015
npm install --save-dev babel-preset-stage-2

使用方式:

下面的src文件匹配使用./src/js/**/*.js 模式
示例代码中没有加 sourcemaps、combiner 等插件

const gulp = require('gulp');
const uglify = require("gulp-uglify");
const babel = require("gulp-babel");
const es2015Preset = require("babel-preset-es2015");
/**
 * 压缩js 将 ./src/js 所有的js文件进行压缩
 * 输出 ./dist/js
 */
gulp.task("uglifyjs", () => {
    gulp.src("./src/js/**/*.js")
        .pipe(babel({presets:[es2015Preset]}))
        .pipe(uglify())
        .pipe(gulp.dest("./dist/js")); 
});

babel 的 .babelrc 文件中的内容格式就是如下形式,因此在gulp中使用babel,参数格式与下面是一致的,如果需要babel的插件,则只需要 npm install 之后再 gulpfile.js 中引用即可。

{
    "preset":['es2015','stage-2'],
    "plugins:[]
}

处理前:

1-1.png

处理后:

1-2.png