gulp使用ES6

更新到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： 不會翻譯的說。

原文：https://markgoodyear.com/2015/06/using-es6-with-gulp/