Question

我尝试使用gulp-uglify压缩我的项目，但是只要遇到代码中的箭头函数，gulp就会抛出错误Unexpected token: punc ()。有什么办法可以解决这个问题吗？谢谢。

吞掉碰撞-test.js

// Function with callback to simulate the real code
function test(callback) {
    if (typeof callback === "function") callback();
}

// Causes a crash
test(() => {
    console.log("Test ran successfully!");
});

// Doesn't cause a crash
test(function () {
    console.log("Test ran successfully!");
});

gulpfile.js

var gulp = require("gulp");
var concat = require("gulp-concat");
var uglify = require("gulp-uglify");

gulp.task("scripts", function() {
    gulp.src([
        "./gulp-crash-test.js"
    ]).pipe(
        concat("gulp-crash-test.min.js")
    ).pipe(
        uglify().on('error', function(e){
            console.log(e);
        })
    ).pipe(
        gulp.dest("./")
    );
});

gulp.task("watch", function() {
    gulp.watch("./gulp-crash-test.js", ["scripts"]);
});

gulp.task("default", ["watch", "scripts"]);

Answer 1

ES6语法没有支持ugilify（minify）工具。你应该在babel编译之后构建gulp任务（es6 - ＆gt; es5）

1.安装包

npm install gulp-babel babel-preset-es2015

2.更改您的代码如下。

    var gulp = require("gulp");
    var concat = require("gulp-concat");
    var uglify = require("gulp-uglify");
    var babel  = require('gulp-babel');

    gulp.task("scripts", function() {
        return gulp.src(["./gulp-crash-test.js"])
    .pipe(babel({presets: ['es2015']}))
    .pipe(concat("gulp-crash-test.minjs"))
    .pipe(uglify().on('error', function(e){
         console.log(e);
    }))
    .pipe(gulp.dest("./"))
    });

Answer 2

箭头功能是ES6功能。 Babel（以及其他）旨在将ES6转换为ES5或更早版本，作为构建过程的一部分。幸运的是有Gulp和Grunt的Babel插件。在uglify之前运行Babel。

https://www.npmjs.com/package/gulp-babel

我希望这会引导你走向正确的方向/某人可以展示一些代码。

Answer 3

您可以使用babel minify（以前的Babili）基于babel的库来缩小ES6代码而无需进行转换：

首先通过npm安装：

npm install --save-dev babel-preset-minify

然后在你的gulp文件中：

var gulp = require('gulp')
var babel = require('gulp-babel')
gulp.task('default', () => {
  return gulp.src('src/app.js')
  .pipe(babel({presets: ['minify']}))
  .pipe(gulp.dest('dist'))
})

它使用babel作为解析器，但没有转换。

Answer 4

我试过babeli它有点糟透了。建立时间花了我40多岁。而且我不打算将代码转换为es5

我更喜欢使用uglify-es按照说明进行操作 https://www.npmjs.com/package/uglify-es https://www.npmjs.com/package/gulp-uglify

我的构建时间现在是10秒。我有耐心等待10秒。

这是我的gulpfile

var gulp = require('gulp');
var uglifycss = require('gulp-uglifycss');
var htmlminifier = require('gulp-html-minifier');
var useref = require('gulp-useref');
var gulpif = require('gulp-if');
var clean = require('gulp-clean');
var uglifyes = require('uglify-es');
var composer = require('gulp-uglify/composer');
var minifyes = composer(uglifyes, console);

.pipe(gulpif('*.js', minifyes()))

Answer 5

这是我用于带角度和巴贝尔的useref。

.fxml

Answer 6

首先'babel'.js文件

var babel = require('gulp-babel');
gulp.task('babel-js', () =>
gulp.src('js/main.js')
 .pipe(babel({presets: ['env']}))
 .pipe(gulp.dest('build/babel'))
);

https://www.npmjs.com/package/gulp-babel

比'uglify'它

var uglify = require('gulp-uglify'), pump = require('pump');
gulp.task('uglify-js', function (cb) {
   pump([
     gulp.src('build/babel/main.js'),
     uglify(),
     gulp.dest('build/js')
   ],
   cb
);
});

https://www.npmjs.com/package/gulp-uglify

待安装

npm install --save-dev gulp-babel babel-core babel-preset-env
npm install uglify-es -g
npm install pump

Gulp uglify无法处理箭头功能

吞掉碰撞-test.js

gulpfile.js

6 个答案: