更新到gulp 3.9
版本后,我们现在可以在gulpfile
里使用ES6
(或者叫ES2015)了。
首先需要确定gulp
本地版本和命令行的gulp
版本为3.9
,打开命令行,输入以下命令检查你的版本:
gulp -v
然后应该返回:
CLI version 3.9.0
Local version 3.9.0
如果你的版本号低于3.9,在package.json
文件里面更新你的gulp,然后运行下面的更新命令:
npm install gulp && npm install gulp -g
创建ES6 gulpfile
使用ES6,你需要安装Babel
(确保你有Babel 6),在你项目作为依赖,且需要es2015的插件作为前置。
npm install babel-core babel-preset-es2015 --save-dev
安装好了之后,需要创建一个.babelrc
配置文件,用于es2015的设置,添加下面的代码到文件中:
{
"presets": ["es2015"]
}
然后需要让gulp使用Babel,我们需要把gulpfile.js
重命名为gulpfile.babel.js
:
mv "gulpfile.js" "gulpfile.babel.js"
现在可以通过Babel使用ES6啦,一个典型的使用es6新特性的gulp任务例子:
'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));
});
以上。
ps: 不会翻译的说。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。