Gulp中使用ES6

利益于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导入/模块，箭头函数，模板字符串和常量。