[6.2 RC1] gulp-uglify gets hung up on backticks

[JeremyEnglert]

{ [Error: /Users/jeremyenglert/Documents/sites/jointswp-github/wp-content/themes/JointsWP-sass/assets/js/foundation.min.js: Unexpected character '`']
  message: '/Users/jeremyenglert/Documents/sites/jointswp-github/wp-content/themes/JointsWP-sass/assets/js/foundation.min.js: Unexpected character \'`\'',
  fileName: '/Users/jeremyenglert/Documents/sites/jointswp-github/wp-content/themes/JointsWP-sass/assets/js/foundation.min.js',
  lineNumber: 56,

The error is referencing line 56, which is:

if (!plugin.$element.attr(`data-${ pluginName }`)) {

It looks like gulp-uglify is getting hung up whenever a ` (backtick) is used.

Is anyone else noticing this?

Here is my Gulpfile.js

gulp.task('foundation-js', function() {
  return gulp.src([ 

          // Foundation core - needed if you want to use any of the components below
          './vendor/foundation-sites/js/foundation.core.js',
          './vendor/foundation-sites/js/foundation.util.*.js',

          // Pick the components you need in your project
          './vendor/foundation-sites/js/foundation.abide.js',
          './vendor/foundation-sites/js/foundation.accordion.js',
          './vendor/foundation-sites/js/foundation.accordionMenu.js',
          './vendor/foundation-sites/js/foundation.drilldown.js',
          './vendor/foundation-sites/js/foundation.dropdown.js',
          './vendor/foundation-sites/js/foundation.dropdownMenu.js',
          './vendor/foundation-sites/js/foundation.equalizer.js',
          './vendor/foundation-sites/js/foundation.interchange.js',
          './vendor/foundation-sites/js/foundation.magellan.js',
          './vendor/foundation-sites/js/foundation.offcanvas.js',
          './vendor/foundation-sites/js/foundation.orbit.js',
          './vendor/foundation-sites/js/foundation.responsiveMenu.js',
          './vendor/foundation-sites/js/foundation.responsiveToggle.js',
          './vendor/foundation-sites/js/foundation.reveal.js',
          './vendor/foundation-sites/js/foundation.slider.js',
          './vendor/foundation-sites/js/foundation.sticky.js',
          './vendor/foundation-sites/js/foundation.tabs.js',
          './vendor/foundation-sites/js/foundation.toggler.js',
          './vendor/foundation-sites/js/foundation.tooltip.js',
  ])
    .pipe(babel())
    .pipe(concat('foundation.js'))
    .pipe(gulp.dest('./assets/js'))
    .pipe(rename({suffix: '.min'}))
    .pipe(uglify())
    .pipe(gulp.dest('./assets/js'))
});

[colin-marshall]

Are you running it through gulp-babel before you run it through gulp-uglify?

[JeremyEnglert]

Indeed. I added the full task to the original post.

[gakimball]

Do you have a .babelrc in your project? It should look like this:

{
  "presets": ["es2015"]
}

[JeremyEnglert]

That fixed it. However, I went a slightly different route. It looks like you can setup your Babel config right in the Gulp file. Here is what I went with:

    .pipe(babel({
        presets: ['es2015']
    }))

[gakimball]

Yeah, Babel 6's thing is that it doesn't transform any code by default—you have to tell it what transforms you want to use.

[matzner]

This is IMHO unrelated to ES6 – uglify chokes on backticks across the board. Would it be okay to replace those backticks generally with apostrophes? From a coding style consistency perspective, this would be preferable. I'd be happy to create a PR if chances are for it to get accepted.

[JeremyEnglert]

@matzner - the backticks are related to ES6.

http://tc39wiki.calculist.org/es6/template-strings/

[matzner]

Thanks for the hint, @JeremyEnglert. I ran across the issue when building a Foundation 6.2 project, when using the sources in a RequireJS setup, and then minifying the built file using uglifyjs2. This used to work up until Foundation 6.1 – now the build process breaks with 6.2

[JeremyEnglert]

Most likely related to this: #8255

[matzner]

Obviously, when installing 6.2 with a package manager and using a build process, it now is necessary to transpile the code first, which is not an issue per se, just a change we need to be aware of and change the build process accordingly