-
-
Save stephensauceda/ce81e95c6f6c5747d8aa to your computer and use it in GitHub Desktop.
/* | |
* 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!! | |
}); | |
}); |
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
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
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.
Gulp recently implemented ES6 in gulpfiles and I'm kinda in love.