Javascript 狼吞虎咽无法处理箭头功能

我试图使用

gulp uglify

压缩我的项目，但是每当gulp在代码中遇到箭头函数时，它似乎会抛出错误

意外标记：punc（）

。我能做些什么来解决这个问题吗？多谢各位

gulp-crash-test.js gulpfile.js

---

箭头功能是ES6的一项功能。作为构建过程的一部分，Babel（和其他）旨在将ES6转换为ES5或更早版本。幸运的是，有用于Gulp和Grunt的Babel插件。在丑八怪面前跑巴贝尔

---

我希望这能引导您走向正确的方向/有人可以演示一些代码。

没有支持ES6语法的ugilify（minify）工具。 在babel编译（es6->es5）之后，您应该完成BuildGulp任务

1.安装软件包

npm安装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("./"))
    });

您可以使用（以前的Babili）基于babel的库来缩小ES6代码，而无需传输：

首先通过npm安装：

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

然后在您的吞咽文件中：

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作为解析器，但没有透明性。

这是我在使用angular和babel的useref时使用的

gulp.task('concat-js', ['your dependency task'],function(){
  return gulp.src('dev/dev_index/index.html')
    .pipe(useref())
    .pipe(gulpif('*.js', ngAnnotate())) // if you use angular
    .pipe(gulpif('*.js',babel({
        compact: false,
        presets: [['es2015', {modules: false}]]
     })))
    .pipe(gulpif('*.js', uglify({ compress: false })
    .pipe(gulp.dest('./'));
});

---

我试过巴别利，有点糟糕。建造时间花了我40秒。我也不打算将代码传输到es5中

我更喜欢使用丑陋的东西，按照描述

我的构建时间现在是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()))

---

第一个“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'))
);

而不是“丑陋”它

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
);
});

待安装

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

---

您可以在gulpfile.js中使用箭头函数进行练习。但是首先检查一下你的node.js版本。我不知道为什么这里的人会向babel提供建议，问题很明显是如何缩小ecma6代码，这个问题仍然没有答案piping

.pipe（uglify（{compress:true}）

上述答案将导致缩小ES2015代码。值得一提的是，Babili要求节点>=4.0.0我更喜欢这种方法，因为im针对ES6不适合我…安装似乎不正确。错误：找不到模块“gulp babel”-为什么要安装babel preset minify并将其称为gulp babel？你在发布之前尝试过自己的安装吗？@johnblair显然你需要安装gulp babel，因为你需要，gulp也是如此。我在预设中添加了安装，因为这在代码中并不明显，babel是从配置中加载的OK。我放弃了babel，因为我发现版本不兼容的问题很多，我确实这么做了实际上不需要或不想要传输-只是缩小..最后我使用gulp uglifyes来最小化我的ES6 js。在这里发布代码以防其他人发现它有用。uglify=require（“gulp uglifyes”）//缩小文件.pipe（uglify（{mangle:true，ecma:6}））@Rein您也可以使用uglify的harmony分支。看来最新的模块是gulp ugligy es，它将处理ES6。提到的其他模块已弃用/不再受支持。参考：@Jxx您对为什么在uglify之前运行babel有什么解释吗？

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
);
});

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