ES6 Gulpfile Example

gulpfile.babel.js

/* 
 *    Steps
 * 1. Rename your gulpfile.js to gulpfile.babel.js
 * 2. Add babel to your package.json (npm install -D babel)
 * 3. Start writing ES6 in your gulpfile!
 */
 
 import gulp from 'gulp'; // ES6 imports!
 import sass from 'gulp-sass';
 
 const sassOpts = { outputStyle: 'compressed', errLogToConsole: true }; // "let" and "const"!!
 
 gulp.task('sass', () = > { // Arrow functions!!
   gulp.src('./**/*.scss')
    .pipe(sass(sassOpts))
    .pipe(gulp.dest('./'));
 });
 
 gulp.task('default', ['sass'], () => { // Arrow functions!!
   gulp.watch('./src/sass/**/*.scss', ['sass'])
    .on('change', (e) => {  // Arrow functions!!
      console.log(`File ${e.path} was ${e.type}, running Sass task...`); // Template strings and interpolation!!
    });
 });

If you run an ES6-compatible version of Node.js (e.g. version 6), you don't really need to kitchen sink all ES2015 plugins as Node.js natively supports them anyway, the only exception being ES6 modules.

That said, all you need is:

npm install -D babel-core babel-plugin-transform-es2015-modules-commonjs

.babelrc:

{
  "plugins": ["transform-es2015-modules-commonjs"]
}

Why should I rename gulpfile.js to gulpfile.babel.js? Can't seem to find anything about .babel.js suffix...

I don't understand it either. So when I have all this in the file gulpfile.js:

import { src, dest, series, parallel, watch } from 'gulp'
import nodemon from 'gulp-nodemon' // normal nodemon does not display an error on app crash
import env from 'gulp-env'
import browser from 'browser-sync'
import sass from 'gulp-sass'
// Tasks here
export default {
    cssTranspile: cssTranspile,
    jsTranspile: jsTranspile,
    server: series(startNodemon, startBrowserSync),
    default: series(
        parallel(
            cssTranspile,
            jsTranspile
        ),
        startNodemon,
        startBrowserSync,
        function () {
            watch('public/scss/*.scss', cssTranspile)
        }
    )
}

Then when I run gulp from the command line I get the following error:

T:\!]> gulp
internal/modules/cjs/loader.js:1160
      throw new ERR_REQUIRE_ESM(filename, parentPath, packageJsonPath);
      ^

Error [ERR_REQUIRE_ESM]: Must use import to load ES Module: T:\Test\Brecht\Node\ICP\gulpfile.js
require() of ES modules is not supported.

The file naming issue is mentioned in Gulp's README:

Node already supports a lot of ES2015+ features, but to avoid compatibility problems we suggest to install Babel and rename your gulpfile.js to gulpfile.babel.js.

The rename worked for me.