Gulp 自 v3.9.0 版本增長對 Babel 的支持,也就是說可使用 ES2015 語法來編寫 gulp 任務。css
$ gulp -v
確保 gulp-cli 和 gulp 都是 v3.9.0 以上版本。npm
$ npm install gulp && npm install gulp -g
安裝 babel-core 和 babel-preset-es2015。gulp
$ npm install babel-core babel-preset-es2015 --save-dev
新建 .babelrc
寫入如下內容:sass
{ "presets": ["es2015"] }
將配置文件 gulpfile.js
重命名爲 gulpfile.babel.js
。babel
以後即可以使用 ES2015 語法編寫 gulpfile.babel.js 了。app
'use strict'; import gulp from 'gulp'; import sass from 'gulp-sass'; import autoprefixer from 'gulp-autoprefixer'; import sourcemaps from 'gulp-sourcemaps'; const dirs = { src: 'src', dest: 'build' }; const sassPaths = { src: `${dirs.src}/app.scss`, dest: `${dirs.dest}/styles/` }; gulp.task('styles', () => { return gulp.src(paths.src) .pipe(sourcemaps.init()) .pipe(sass.sync().on('error', plugins.sass.logError)) .pipe(autoprefixer()) .pipe(sourcemaps.write('.')) .pipe(gulp.dest(paths.dest)); });
安裝 gulp-babel
:npm install gulp-babel --save-babel
。ui
示例:es5
import gulp from 'gulp'; import babel from 'gulp-babel'; gulp.task('default', () => { return gulp.src('./src/*.js', {base: 'src'}) .pipe(babel()) .pipe(gulp.dest('build')); });