Gulp uglify 无法处理箭头函数
Gulp uglify unable to handle arrow functions
我正在尝试使用 gulp-uglify
压缩我的项目,但是 gulp 似乎在代码中遇到箭头函数时抛出错误 Unexpected token: punc ()
。我能做些什么来解决这个问题吗?谢谢。
gulp-崩溃-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"]);
箭头函数是 ES6 的一个特性。 Babel(和其他)旨在将 ES6 转换为 ES5 或更早版本,作为构建过程的一部分。幸运的是,Gulp 和 Grunt 有 Babel 插件。 运行 丑化前的 Babel。
https://www.npmjs.com/package/gulp-babel
希望这对您有所帮助direction/somebody 可以演示一些代码。
没有支持 ES6 语法的 ugilify(minify) 工具。
你应该在 babel compile (es6 -> es5)
之后构建 gulp 任务
1.Install 包
npm install gulp-babel babel-preset-es2015
2.change 您的代码如下。
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("./"))
});
您可以使用 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 作为解析器,但没有转译。
这就是我在 angular 和 babel 中用于 userref 的内容。
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('./'));
});
我试过 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()))
首先 '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
压缩我的项目,但是 gulp 似乎在代码中遇到箭头函数时抛出错误 Unexpected token: punc ()
。我能做些什么来解决这个问题吗?谢谢。
gulp-崩溃-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"]);
箭头函数是 ES6 的一个特性。 Babel(和其他)旨在将 ES6 转换为 ES5 或更早版本,作为构建过程的一部分。幸运的是,Gulp 和 Grunt 有 Babel 插件。 运行 丑化前的 Babel。
https://www.npmjs.com/package/gulp-babel
希望这对您有所帮助direction/somebody 可以演示一些代码。
没有支持 ES6 语法的 ugilify(minify) 工具。 你应该在 babel compile (es6 -> es5)
之后构建 gulp 任务1.Install 包
npm install gulp-babel babel-preset-es2015
2.change 您的代码如下。
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("./"))
});
您可以使用 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 作为解析器,但没有转译。
这就是我在 angular 和 babel 中用于 userref 的内容。
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('./'));
});
我试过 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()))
首先 '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