gulp不能转换es6箭头函数以及函数的默认参数

Question

今天对小程序的代码使用gulp进行压缩，发现es6箭头函数以及函数的默认参数都不能被正确的处理。

Package.json:

{
  "name": "yasuoxcx",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "clean": "gulp clean --silent",
    "dev": "gulp watch --silent",
    "build": "gulp prod --silent"
  },
  "devDependencies": {
    "autoprefixer": "^7.1.6",
    "babel-core": "^6.26.0",
    "babel-preset-env": "^1.6.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-loader": "^6.2.10",
    "babel-preset-latest": "^6.0.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-preset-stage-2": "^6.22.0",
    "babel-register": "^6.22.0",
    "colors": "^1.1.2",
    "cssnext": "^1.8.4",
    "gulp": "^3.9.1",
    "gulp-autoprefixer": "^4.0.0",
    "gulp-babel": "^7.0.0",
    "gulp-clean": "^0.3.2",
    "gulp-clean-css": "^3.9.0",
    "gulp-concat": "^2.6.1",
    "gulp-connect": "^5.0.0",
    "gulp-cssmin": "^0.1.7",
    "gulp-imagemin": "^3.1.1",
    "gulp-jshint": "^2.0.4",
    "gulp-jsonminify": "^1.0.0",
    "gulp-less": "^3.3.0",
    "gulp-load-plugins": "^1.5.0",
    "gulp-postcss": "^7.0.0",
    "gulp-replace": "^0.6.1",
    "gulp-sourcemaps": "^2.6.1",
    "gulp-uglify": "^2.1.0",
    "gulp-uglyfly": "^1.4.2",
    "jshint": "^2.9.4",
    "jshint-stylish": "^2.2.1",
    "less": "^2.7.2",
    "open": "0.0.5",
    "postcss": "^6.0.13",
    "precss": "^2.0.0",
    "pump": "^1.0.2"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "gulp-json-minify": "^1.2.0"
  }
}

Gulpfile.js:

/**
 * 微信小程序优化压缩工具
 * @author: shuo.wang
 */
const gulp = require('gulp');
const colors = require("colors");
const pump = require('pump');
const uglify = require('gulp-uglify');
const minifier = require('gulp-uglify/minifier');
// const jsonminify = require('gulp-jsonminify');
const jsonminify = require('gulp-json-minify');
const cleanCSS = require('gulp-clean-css');
const imagemin = require('gulp-imagemin');
// const del = require('del');
const replace = require('gulp-replace');
const uglyfly = require('gulp-uglyfly');
const $ = require('gulp-load-plugins')();
const babel = require("gulp-babel");    // 用于ES6转化ES5
var sourcemaps = require("gulp-sourcemaps");
var postcss = require('gulp-postcss');
var autoprefixer = require('autoprefixer');
var cssnext = require('cssnext');
var precss = require('precss');
// 配置项
const conf = {
    // 开发目录
    devPath: 'src',
    // 编译目录
    prodPath: 'dist',
    filesPath: {
        // js文件
        js: '/**/*.js',
        // wxss文件
        wxss: '/**/**.wxss',
        // wxml文件
        wxml: '/**/**.wxml',
        // json文件
        json: '/**/**.json',
        // 图片文件(jpg|jpeg|png|gif)
        pic: '/**/{**.jpg,**.jpeg,**.png,**.gif}',
        // 矢量图(svg)
        svg: '/**/**.svg'
    }
};

// 显示时间
const getTime = function () {
    return '[' + colors.white(new Date().getHours() + ':' + new Date().getMinutes() + ':' + new Date().getSeconds()) + '] ';
};

// 输出log
const _log = function (msg) {
    console.log(getTime() + msg);
};

/**
 * 优化js文件
 * @param filePath
 */
const _optJS = function (filePath, cb) {
    const options = {};
    _log(colors.white('对 js 文件进行优化...'));
    pump([
        gulp.src(filePath, {base: conf.devPath}),
        uglify().on('error', function (err) {
            _log('【错误】 '.red + '文件: ' + err.fileName + ', ' + err.cause);
        }),
        sourcemaps.init(),
        babel(),
        sourcemaps.write("."),
        gulp.dest(conf.prodPath)
    ], cb);
    // gulp.src(filePath, {base: conf.devPath})
    //   .pipe(uglyfly())
    //   .pipe(gulp.dest(conf.prodPath));
    // cb();
};

/**
 * 优化wxss文件
 * @param filePath
 */
const _optWXSS = function (filePath, cb) {
    const options = {
        debug: false
    };
    var processors = [autoprefixer, cssnext, precss];
    _log(colors.white('对 wxss 文件进行优化...'));
    gulp.src(filePath, {base: conf.devPath})
        .pipe(cleanCSS(options, function (details) {
            if (options.debug) {
                var _ratio = details.stats.efficiency !== 'NaN' ? (details.stats.efficiency * 100).toFixed(2) + '%' : '0%';
                _log(colors.white('文件 ' + details.name + ', ' + details.stats.originalSize + '==>' + details.stats.minifiedSize + ', 用时: ' + details.stats.timeSpent + 'ms, 压缩比: ' + _ratio));
            }
        }))
        .pipe(postcss(processors))
        .pipe(gulp.dest(conf.prodPath));
    cb();
};

/**
 * 优化json文件
 * @param filePath
 * @private
 */
const _optJSON = function (filePath, cb) {
    _log(colors.white('对 json 文件进行优化...'));
    gulp.src(filePath, {base: conf.devPath})
        .pipe(jsonminify())
        .pipe(gulp.dest(conf.prodPath));
    cb();
};

/**
 * 优化wxml文件
 * @param filePath
 * @private
 */
const _optWXML = function (filePath, cb) {
    _log(colors.white('对 wxml 文件进行优化...'));
    gulp.src(filePath, {base: conf.devPath})
    // 删除换行符和tab缩进
        .pipe(replace(/\n+|\t+/g, ''))
        // 将连续空格替换为单个空格
        .pipe(replace(/\s+/g, ' '))
        // 将" <"和"> "的空格删除
        .pipe(replace(/(>\s)/g, '>'))
        .pipe(replace(/(\s<)/g, '<'))
        // 删除注释
        .pipe(replace(/<!--[\w\W\r\n]*?-->/g, ''))
        .pipe(gulp.dest(conf.prodPath));
    cb();
};

/**
 * 优化图片文件
 * @param filePath
 * @private
 */
const _optImages = function (filePath, fileType) {
    _log(colors.white('对 ' + fileType + ' 文件进行优化...'));
    gulp.src(filePath, {base: conf.devPath})
        .pipe(imagemin([
            imagemin.gifsicle(),
            imagemin.jpegtran(),
            imagemin.optipng(),
            imagemin.svgo()
        ], [
            {optimizationLevel: 3},
            {},
            {optimizationLevel: 7},
            {}
        ], true))
        .pipe(gulp.dest(conf.prodPath));
};

/**
 * 复制文件
 * @param filePath
 */
const _copyFiles = function (filePath, cb) {
    _log(colors.white('将 ' + conf.devPath + ' 输出到 ' + conf.prodPath));
    gulp.src(filePath, {base: conf.devPath})
        .pipe(gulp.dest(conf.prodPath));
    if (!!cb) {
        cb();
    }
};

// 监听任务
gulp.task('watch', ['clean'], function (cb) {
    // 文件列表
    const _files = [
        conf.devPath + conf.filesPath.js,
        conf.devPath + conf.filesPath.wxss,
        conf.devPath + conf.filesPath.json,
        conf.devPath + conf.filesPath.wxml,
        conf.devPath + conf.filesPath.pic,
        conf.devPath + conf.filesPath.svg
    ];

    // 复制文件到dist目录
    _copyFiles(_files, cb);

    // 监听文件变化
    _log(colors.magenta('开始监听文件变化(Ctrl-C退出)...'));
    gulp.watch(_files, function (event) {
        _log(colors.green('File ' + event.path + ' was ' + event.type + ', running tasks...'));
        _copyFiles(event.path);
    });
});

// 清理编译目录
gulp.task('clean', function (cb) {
    _log(colors.white('开始清理 ' + conf.prodPath + ' 目录...'));
    cb();
/*    gulp.src([conf.devPath,app.prdPath])
        .pipe($.clean());*/
/*    del([conf.prodPath] + '/!**!/!*').then(function (paths) {
        _log(colors.white('清理完毕, 共清理 ' + colors.red(paths.length) + ' 个文件和目录。'));
        cb();
    });*/
});

// 优化js
gulp.task('js', ['clean'], function (cb) {
    const _files = conf.devPath + conf.filesPath.js;
    _optJS(_files, cb);
});
// 优化wxss
gulp.task('wxss', ['clean'], function (cb) {
    const _files = conf.devPath + conf.filesPath.wxss;
    _optWXSS(_files, cb);
});
// 优化wxml
gulp.task('wxml', ['clean'], function (cb) {
    const _files = conf.devPath + conf.filesPath.wxml;
    _optWXML(_files, cb);
});
// 优化json
gulp.task('json', ['clean'], function (cb) {
    const _files = conf.devPath + conf.filesPath.json;
    _optJSON(_files, cb);
});
// 优化图片
gulp.task('images', ['clean'], function () {
    const _files1 = conf.devPath + conf.filesPath.pic;
    const _files2 = conf.devPath + conf.filesPath.svg;
    _optImages(_files1, 'jpg/jpeg/png/gif');
    _optImages(_files2, 'svg');
});

// 开始任务
gulp.task('startProd', ['clean'], function () {
    _log(colors.green('开始优化, 请稍候...'));
});

// 编译任务
gulp.task('prod', ['startProd', 'js', 'wxss', 'wxml', 'json', 'images'], function () {
    _log(colors.green('优化完毕, 请查看 ' + conf.prodPath + ' 目录。'));
});

发现当使用gulp-babel将es6的箭头函数转换成es5语法的时候出现了错误

Answer 1

已经解决了，是`"gulp-uglify": "^2.1.0",

"gulp-uglyfly": "^1.4.2",`这两个的问题，我使用了`"gulp-uglifyes": "^0.1.2",`这个就搞定了

Answer 2

你再仔细看看babel的文档，怀疑是你的babel用错了。

Answer 3

gulp 从3.9.0开始支持babel，但是要把文件名改为gulpfile.babel.js