在 Gulp 中使用 ES2015

Gulp 3.9.0 新增了 babel 支持，可以在配置文件 gulpfile.js 中使用 ES2015。

确认 gulp 版本

在命令行中输入：

gulp -v

应该返回：

CLI version 3.9.0
Local version 3.9.0

如果返回的 gulp 版本低于 3.9，则升级 gulp 先。

在 gulp 配置文件中使用 ES2015

修改文件名

将 gulpfile.js 重命名为 gulpfile.babel.js，以使 gulp 执行前自动调用 babel 转换文件。

安装依赖

如上所言，gulp 执行前会先调用 babel 转换 ES2015，需要安装 babel。

npm install babel --save-dev

使用 ES2015 编写 gulp 配置文件

在 gulpfile.babel.js 中编写：

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 styles 回车——和使用 ES5 一样正常执行。

上面的代码中使用了以下 ES2015 特性：

• import/modules
• arrow functions
  -template strings
• constants

更多 ES2015 特性可访问 es6-features.org 查看。