在gulp中使用ES6

gulp在3.9版本里面增長了對babel的支持，所以咱們能夠直接在gulpfile裏面使用ES6(ES2015)了。

升級gulp版本

首先要檢測一下咱們的gulp版本，確保CLI版本及Local版本都在3.9之上:

gulp -v

版本以下：

CLI version 3.9.0
Local version 3.9.0

若版本太低，咱們能夠經過如下方式進行升級，這裏將同時升級CLI版本和Local版本：

npm install gulp -g && npm install gulp --save-dev

安裝babel

咱們須要安裝babel-core及babel-preset-es2015來轉換ES6代碼：

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

而後，建立一個.babelrc文件來使用es2015 preset：

touch .babelrc

寫入以下內容：

{
  "presets": ["es2015"]
}

接下來就是使用ES6語法重寫gulpfile了。

使用ES6語法重寫gulpfile

首先，重命名gulpfile.js爲gulpfile.babel.js，這樣gulp執行前會自動調用babel轉換文件。

mv gulpfile.js gulpfile.babel.js

而後在gulpfile.babel.js裏面用ES6語法寫些內容，以下：

'use strict';

import gulp from 'gulp';
import less from 'gulp-less';

const paths = {
  less: 'less/',
  dest: 'build/'
};

gulp.task('less', () => {
  gulp.src(`${paths.less}**/*.less`)
    .pipe(less())
    .pipe(gulp.dest(`${paths.dest}css/`));
});

而後執行gulp命令：

gulp less

這裏和原來同樣，之前的命令怎麼用如今仍是怎麼用!

GitHub源碼：using-es6-with-gulp

參考資料：

https://github.com/yeoman/generator-gulp-webapp/issues/356

es6-features.org