gulp在3.9版本里面增加了对babel的支持,因此我们可以直接在gulpfile里面使用ES6(ES2015)了。
升级gulp版本
首先要检测一下我们的gulp版本,确保CLI版本及Local版本都在3.9之上:
gulp -v
版本如下:
CLI version 3.9.0
Local version 3.9.0
若版本过低,我们可以通过以下方式进行升级,这里将同时升级CLI版本和Local版本:
npm install gulp -g && npm install gulp --save-dev
安装babel
我们需要安装babel-core及babel-preset-es2015来转换ES6代码:
npm install babel-core babel-preset-es2015 --save-dev
然后,创建一个.babelrc
文件来使用es2015 preset:
touch .babelrc
写入如下内容:
{
"presets": ["es2015"]
}
接下来就是使用ES6语法重写gulpfile了。
使用ES6语法重写gulpfile
首先,重命名gulpfile.js为gulpfile.babel.js,这样gulp执行前会自动调用babel转换文件。
mv gulpfile.js gulpfile.babel.js
然后在gulpfile.babel.js里面用ES6语法写些内容,如下:
'use strict';
import gulp from 'gulp';
import less from 'gulp-less';
const paths = {
less: 'less/',
dest: 'build/'
};
gulp.task('less', () => {
gulp.src(`${paths.less}**/*.less`)
.pipe(less())
.pipe(gulp.dest(`${paths.dest}css/`));
});
然后执行gulp命令:
gulp less
这里和原来一样,以前的命令怎么用现在还是怎么用!
GitHub源码:using-es6-with-gulp
参考资料: