使用 ES2015 編寫 Gulp 構建

Gulp 自 v3.9.0 版本增長對 Babel 的支持，也就是說可使用 ES2015 語法來編寫 gulp 任務。

檢查 gulp 版本

$ gulp -v

確保 gulp-cli 和 gulp 都是 v3.9.0 以上版本。

$ npm install gulp && npm install gulp -g

安裝 babel

安裝 babel-core 和 babel-preset-es2015。

$ npm install babel-core babel-preset-es2015 --save-dev

新建 .babelrc 寫入如下內容：

{
    "presets": ["es2015"]
}

重命名配置文件

將配置文件 gulpfile.js 重命名爲 gulpfile.babel.js。

以後即可以使用 ES2015 語法編寫 gulpfile.babel.js 了。

示例

'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));
});

使用 gulp-babel 將 ES2015 文件轉換爲 ES5

安裝 gulp-babel：npm install gulp-babel --save-babel。

示例：

import gulp from 'gulp';
import babel from 'gulp-babel';

gulp.task('default', () => {
    return gulp.src('./src/*.js', {base: 'src'})
        .pipe(babel())
        .pipe(gulp.dest('build'));
});