Gulp 自 v3.9.0 版本增加对 Babel 的支持,也就是说可以使用 ES2015 语法来编写 gulp 任务。
检查 gulp 版本
$ gulp -v
确保 gulp-cli 和 gulp 都是 v3.9.0 以上版本。
$ npm install gulp && npm install gulp -g
安装 babel
安装 babel-core 和 babel-preset-es2015。
$ npm install babel-core babel-preset-es2015 --save-dev
新建 .babelrc
写入以下内容:
{
"presets": ["es2015"]
}
重命名配置文件
将配置文件 gulpfile.js
重命名为 gulpfile.babel.js
。
之后便可以使用 ES2015 语法编写 gulpfile.babel.js 了。
示例
'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 将 ES2015 文件转换为 ES5
安装 gulp-babel
:npm install gulp-babel --save-babel
。
示例:
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'));
});