Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Uglification failed. Unexpected character '`'

gulp-uglify is unable to uglify this piece of code:

    var alertString = `<?xml version="1.0" encoding="UTF-8" ?>
        <document>
          <alertTemplate>
            <title>${title}</title>
            <description>${description}</description>
          </alertTemplate>
        </document>`

it complains at the character: `. The character is valid for the apple's JS framework. I can't see anything inside the uglify package to ignore those characters and the text string inside it. Am i missing something from the documentation?

like image 940
sailens Avatar asked Dec 21 '15 14:12

sailens


2 Answers

ES6 is supported in a newer version of gulp-uglify called gulp-uglify-es. If you are using Gulp 4 you can also use .browserlistrc. Below are examples of a project I am using that needs Chrome and Firefox 56 support.

gulpfile.js

    const uglify = require('gulp-uglify-es').default;

    .pipe(babel({
        presets: ['@babel/preset-env'],
        compact:false
     }))
     .pipe(uglify())

.browserlistrc (read more on browserlist)

last 2 chrome versions
firefox 56
like image 56
mbokil Avatar answered Nov 13 '22 21:11

mbokil


Gulp-uglify has yet no official support for ECMAScript 2015 (aka ES6, aka Harmony) but with a little modification the on-development repository can be used.

How-to:

  1. Open Console and enter

cd node_modules/gulp-uglify

  1. Edit package.json

dependencies": { "uglify-js": "git+https://github.com/mishoo/UglifyJS2.git#harmony" },

  1. Console enter:

npm update

And it is ready to run .pipe(uglify()) again


Alternate Solution

  1. Download the following via npm:

npm install --save-dev gulp-uglify gulp-babel babel-preset-es2015

  1. Add the following requires in the gulpfile.js:

var babel = require('gulp-babel'), uglify = require('gulp-uglify');

  1. The gulp task will be as follow:

gulp.task('uglify', function(){ gulp.src('*.js') .pipe(babel({ presets: ['es2015'] })) .pipe(uglify().on('error', function(e){ console.log(e); })) .pipe(gulp.dest('js')); });

What this does is transpile all the EcmaScript 2015 JS code to EcmaScript5 and then uglifies it.

like image 37
sailens Avatar answered Nov 13 '22 22:11

sailens