利益于Babel转换器,gulp 3.9及之后的版本我们可以在gulp文件中使用ES6(ES2015)
首先确保你的CLI和gulp版本至少是3.9:
gulp -v
CLI version 3.9.1
Local version 3.9.1
创建一个 ES6 gulpfile
为了使用ES6 你需要使用Babel(确保你至少有Babel 6)作为你项目的依赖以及ES2015插件预置:
npm install babel-core babel-preset-es2015 --save-dev
接下来我们创建一个.babelrc配置文件来启用ES2015预设:
touch .babelrc
然后在文件中增加以下内容:
{
"presets": ["es2015"]
}
我们需要指示gulp使用Bable。为此,我需要将gulpfile.js重命名为gulpfile.babel.js
mv gulpfile.js gulpfile.babel.js
我们现在可以通过Babel使用ES6了,下面是在常用gulp任务中使用新的ES6功能的一个例子:
'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));
});
这里我们使用了ES6导入/模块,箭头函数,模板字符串和常量。