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
With gulp 3.9, we are now able to use ES6 (or ES2015 as it's now named) in our gulpfile—thanks to the awesome Babel transpiler.
Writing the First Gulp Task. All Gulp configuration goes in a file called gulpfile. js located at the root of the project. The pattern for writing tasks is that you first load a plugin you're about to use and then define a task that is based on that plugin.
Gulp is a task runner that uses Node. js as a platform. Gulp will run the tasks that will transpile JavaScript files from es6 to es5 and once done will start the server to test the changes. We have used babel 6 in the project setup.
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-clinpm install -g gulp-cli
Then install gulp, babel core, and the es2015 presetsnpm 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
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With