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!!
    });
 });

Gulp recently implemented ES6 in gulpfiles and I'm kinda in love.

That's awesome. But I don't know how to run the gulp. Like gulp default?

If you only run gulp from the terminal, it will run the "default" task. "Default" is just a way of designating which task to run. So to run the Sass task directly, you'd run gulp sass and to run the default task, gulp.

Cheers for this – so awesome! However, when I run my tasks I get the following message:

$ gulp
Failed to load external module babel-core/register
Requiring external module babel/register
...

I can't find anything regarding the difference between the two, only that they are similar packages (or the same). Not sure if you've seen any issues?

hey @adamcbrewer, you must have babel installed locally:

npm install babel --save-dev

@adamcbrewer

try using npm install --save-dev babel-core

没有用哦！一点用都么有

First

npm install --save-dev babel-core babel-preset-es2015

Then

check your gulp version and try update it

@baermowei

window 一直 Requiring external module babel-core/register

Any chance of using ES6 with the local gulp binary?

i.e. /node_modules/.bin/gulp ?

gulp.task('sass', () = > { // Arrow functions!!

should be:

gulp.task('sass', () => { // Arrow functions!!

You've got a space in your arrow function

so nice

Gulp recently implemented ES6 in gulpfiles and I'm kinda in love.

@stephensauceda Not sure I'm following. Are you saying gulp is parsing ES6 syntax now?

Just a suggestion: i think it would be great if you add the package.json into the repo. So that its easy to understand the dependent library than installing one by one.

I'm seeing the same issue as @adamcbrewer and @aa8562373. I've tried installed babel-core and babel-presets-es2015 but still see the same message in Terminal: Requiring external module babel-core/register

Whilst this eventually finishes, it's much slower than using ES5 syntax. I read skimmed this article: http://thoughts.al-the-x.me/post/140802297614/please-dont-write-your-build-file-with-babel and decided to upgrade to Gulp 4 and use a more limited set of ES6 features, as I was getting around about the same build times as I was using ES5.

I appreciate my comment is late to the party, I was just wondering if anybody had had any further luck with using Babel, or whether just using Gulp 4 is the way to go now?

Given a file called gulpfile.babel.js

RUN

npm install --save-dev babel-core babel-preset-es2015

Then add "es2015" to your list of presets in your .babelrc file (e.g {"presets": ["es2015"], ....})

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.