/ gulp

在 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 特性:

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