Gulp uglify unable to handle arrow functions

Question

I'm trying to compress my project using gulp-uglify, however gulp seems to throw the error Unexpected token: punc () whenever it encounters an arrow function in the code. Is there anything I can do to fix this? Thank you.

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"]);

You could practice with arrow functions in your gulpfile.js. But first check your node.js version. — Oleksii, Mar 23 '16 at 14:05

score 26 · Accepted Answer · answered Mar 23 '16 at 13:37

26

Arrow functions are an ES6 feature. Babel (and others) are designed to translate ES6 to ES5 or earlier as part of your build process. Luckily there are Babel plug-ins for Gulp and Grunt. Run Babel before uglify.

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

I hope this steers you in the right direction/somebody can demonstrate some code.

answered Mar 23 '16 at 13:37

Jxx

1,014
10
9

@Rein You could also use the harmony branch of uglify. https://www.npmjs.com/package/uglify-js-harmony – Charles Ferentchak Mar 10 '17 at 20:56
2

Appears latest module is gulp-ugligy-es which will handle ES6. Other modules mentioned are deprecated / no longer supported. Reference: https://www.npmjs.com/package/gulp-uglify-es – May 20 '18 at 01:31
@Jxx Do you have any explanation on why run babel before uglify? – inafalcao Jul 12 '20 at 20:20

superui · Answer 2 · 2016-03-23T15:24:22.193

24

There is no supporting ugilify(minify) tools for ES6 Syntax. you should be build gulp task after babel compile (es6 -> es5)

1.Install packages

npm install gulp-babel babel-preset-es2015

2.change your code as below.

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

edited Mar 23 '16 at 15:24

answered Mar 23 '16 at 14:36

superui

654
5
10

13

I don't know why people here I giving advices with babel, the question was clearly how to minify ecma6 code, and that question is still unanswered – Ivan Aug 09 '16 at 13:25
1

Piping `.pipe(uglify({ compress: true })` into the above answer will result in minified ES2015 code. – Andrew Hill Nov 25 '16 at 01:19

Gabriel Furstenheim · Answer 3 · 2017-12-02T13:23:16.580

11

You can use babel minify (previously Babili) a library based on babel to minify ES6 code without transpiling:

First install via npm:

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

Then in your gulp file:

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

It uses babel as a parser, but there is no transpilation.

edited Dec 02 '17 at 13:23

answered Aug 26 '16 at 15:22

Gabriel Furstenheim

2,969
30
27

It is worth mentioning that Babili requires node>=4.0.0 – vandre Jan 06 '17 at 19:18
i prefer this method since im targeting ES6 – ColacX Jul 09 '17 at 01:05
Didn't work for me... the install doesn't appear to be the right one. Error: Cannot find module 'gulp-babel' - why are you installing babel-preset-minify and referring to it as gulp-babel? Did you try your own install before posting? – john blair Jun 02 '20 at 12:16
@johnblair Obviously you need to install gulp-babel since you are requiring, same goes for gulp. I added the install on the preset because that is not obvious from the code, babel loads it from the configuration – Gabriel Furstenheim Jun 02 '20 at 16:32
Ok. I gave up with Babel as i found lots of issues with version incompatibilites and i didn't actually need or want the transpiling - just the minification.. In the end I used gulp-uglifyes to minimise my ES6 js. Posting the code here in case anyone else finds it useful. uglify = require("gulp-uglifyes") // Minify the file .pipe(uglify({ mangle: true, ecma: 6 })) – john blair Jun 03 '20 at 17:44

score 3 · Answer 4 · answered Jul 09 '17 at 01:34

I tried babeli it kinda sucked. build time took me 40s. And I am not looking to transpile the code into es5 anyway

I prefer using uglify-es follow the descriptions https://www.npmjs.com/package/uglify-es https://www.npmjs.com/package/gulp-uglify

My build times are now 10s. I have the patience to wait 10s.

This is my 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()))

score 0 · Answer 5 · answered May 10 '17 at 01:05

This is what i use for useref with angular and 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('./'));
});

score 0 · Answer 6 · answered Apr 02 '18 at 11:22

first 'babel' the .js file

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

than 'uglify' it

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

To be installed

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

Gulp uglify unable to handle arrow functions

gulp-crash-test.js

gulpfile.js

6 Answers6

Linked