Is it possible write a gulpfile in es6?

Question

Question: How can I write my gulp file in ES6 so I can use import instead of require and use => syntax over function()?

I can use io.js or node any version.

---

gulpfile.js:

import gulp from "./node_modules/gulp/index.js";
gulp.task('hello-world', =>{
    console.log('hello world');
});

Errors:

import gulp from "./node_modules/gulp/index.js";
^^^^^^
SyntaxError: Unexpected reserved word

---

gulp.task('hello-world', =>{
                         ^^
SyntaxError: Unexpected token =>

Inside the node_modules/gulp/bin/gulp.js i've changed the first line to #!/usr/bin/env node --harmony as asked in this stack

Answer 1

Yes, you can by using babel.

Make sure you've got the latest version of the gulp-cli.

npm install -g gulp-cli

Install babel as a dependency of the project.

npm install --save-dev babel

Rename gulpfile.js to gulpfile.babel.js

Your gulpfile might look something like this:

import gulp from 'gulp';

gulp.task('default', () => {
  // do something
});

Update for Babel 6.0+ As correctly pointed out by Eric Bronniman, there are a few extra steps involved in getting this to work with the latest version of babel. Here are those instructions:

Again, make sure you've got the latest version of gulp-cli
npm install -g gulp-cli

Then install gulp, babel core, and the es2015 presets
npm install --save-dev gulp babel-core babel-preset-es2015

Then, either add the following to a .babelrc file or to your package.json

"babel": {
  "presets": [
    "es2015"
  ]
}

Your gulpfile.js should be named gulpfile.babel.js

Answer 2

Note you can now use many/most ES6 features in Node.js v4.0.0 without babel. However apparently 'import' is still not supported. See: https://nodejs.org/en/docs/es6/

Edit: Most of the popular ES6 features (including destructuring and spread) are supported by default in NodeJS 5.0 (see above link.) The only major missing feature appears to be ES6 modules as far as I can tell.

Answer 3

I use babel-node and native gulp.

1. Install babel and gulp as devDependencies.
2. Write gulpfile.js with ES6 syntax.
3. Use command ./node_modules/.bin/babel-node ./node_modules/.bin/gulp to run gulp
4. In package.json scripts section, you can skip the first ./node_modules/.bin/ part - as babel-node ./node_modules/.bin/gulp.

The advantage of this appoach is, one day when the node.js support all ES6 features one day, all you need to opt-out babel runtime is to replace babel-node with node. That is all.

Answer 4

Basically, what you need to install using npm is gulp, gulp-babel and babel-resent-env, add "env" to your .babelrc presets array, and use a gulpfile.babel.js file.

npm install gulp-babel --save-dev

Some of the answers mentioned babel-core, babel-preset-es2015, etc. The Babel official setup guide with Gulp is to use gulp-babel only, while gulp-babel has dependencies modules including babel-core so you don't need to install it separately.

About preset, you need to use a preset to make Babel actually do something, which is called Preset Env that automatically determines the Babel plugins you need based on your supported environments.

npm install babel-preset-env --save-dev 

and in .babelrc file

{
  "presets": ["env"]
}

Answer 5

If you're using the most modern version of Gulp and the Gulp CLI, you can just do Gulpfile.babel.js and it will understand and transpile your ES6 gulpfile with BabelJS by default.

It is also important to have the BabelJS transpiler installed under devDependencies as is Gulp:

npm install --save-dev babel

Also note that to require gulp in this context, you do not have to import the index.js, you can just:

import gulp from 'gulp';

Answer 6

Steps I followed for developing the code for gulpfile in es6:

• npm install gulp && sudo npm install gulp -g.
• Please make sure that you you are using the updated version of Gulp. The current version at the time of writing this answer was 3.9.1. To check which version of gulp is installed, type gulp -v
• npm install babel-core babel-preset-es2015-without-strict --save-dev
• Type touch .babelrc in the terminal

• In the .babelrc file, add this code

  { "presets": ["es2015-without-strict"] }

• Created the gulp config file with the name gulpfile.babel.js

• Voila!!! You can now write the config code for gulp in ES6.

Source: Using ES6 with Gulp - Mark Goodyear