web-dev-qa-db-ja.com

Gulp uglifyが矢印関数を処理できません

_gulp-uglify_を使用してプロジェクトを圧縮しようとしていますが、コード内で矢印関数が検出されると、gulpはUnexpected token: punc ()エラーをスローするようです。これを修正するためにできることはありますか？ありがとうございました。

gulp-crash-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"]);
_
javascriptgulpecmascript-6gulp-uglify
21
Paradoxis

矢印関数はES6の機能です。 Babel（およびその他）は、ビルドプロセスの一部としてES6をES5以前に変換するように設計されています。幸いなことに、GulpとGruntのBabelプラグインがあります。 uglifyの前にBabelを実行します。

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

これが正しい方向にあなたを導くことを願っています/誰かがいくつかのコードをデモンストレーションできます。

23
Jxx

ES6構文をサポートするugilify（minify）ツールはありません。 babelコンパイル後にgulpタスクをビルドする必要があります（es6-> 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("./"))
    });
23
superui

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を使用しますが、トランスピレーションはありません。

11
Gabriel Furstenheim

私はそれがちょっと吸ったバベルを試してみました。ビルド時間は40秒かかりました。とにかくコードをes5に変換するつもりはありません

私はuglify-esを使用して、説明に従ってください https://www.npmjs.com/package/uglify-eshttps://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()))
3
ColacX

これは、userefにangularとbabelを使用して使用するものです。

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('./'));
});
0
Harel Levy

最初の.jsファイルを「babel」

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
0
Dan Alboteanu