↓Skip to main content

Using ES6 with gulp

·1 min
Web

For vihanti.com, we’re using gulp as our build system instead of hugo (which is what this site uses), because it allows us to take advantage of the latest goodness available through npm. I really wanted to use ES6 for this project, but I found it a little tricky to find the best way to get minified JS with ES6. The important thing here is that we’re using rollup to both process the ES6 code and minify it using terser. I tried using babelify and uglify, but I ran into trouble with gulp 4’s async task execution model. I kept getting the dreaded “Did you forget to signal async completion?” error. I finally tracked it down to a problem with uglify.

To help whoever comes along, here’s the most important part:

gulpfile.babel.js

import babel from 'rollup-plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import eslint from 'gulp-eslint'
import resolve from '@rollup/plugin-node-resolve'
import rollup from 'gulp-better-rollup'
import { terser } from 'rollup-plugin-terser'
import sourcemaps from 'gulp-sourcemaps'

export function scripts () {
  return gulp.src('app/scripts/app.js')
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
    .pipe(sourcemaps.init())
    .pipe(rollup(
      {
        plugins: [
          babel(),
          resolve({ preferBuiltins: true, mainFields: ['browser'] }),
          commonjs(),
          terser()
        ]
      },
      { format: 'umd' }))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('public'))
}

To see the rest of the config, pop over to github.

↑