一説起ES6，總會順帶看到webpack、babel、browserify還有一些認都不認識的blabla名詞，對於gulp才會一點點的我來説，內心簡直是崩潰的，上網查了一些文章，探索着用gulp搭起一個ES6的開發模式，總之先一邊學ES6一邊寫吧。。然後再讓這個流程更加。。高級。

開始

ES6有很多新特性讓人忍不住想去嘗試，然而各種瀏覽器的支持程度還不足以讓我們直接在瀏覽器上執行ES6的代碼，好在babel可以幫助我們將ES6代碼轉碼成ES5，再利用bowserify的幫助，我們就可以盡情體驗ES6帶來的愉悦了。P.S. 構建工具使用的是gulp。

目的

制定一個流程之前還是先得想好我們想讓這個流程是一個什麼樣子。

首先，開發代碼和部署代碼是分開的，比如我們在/app目錄下開發，然後通過gulp構建之後，代碼將存放在 /dist 目錄下。也就是説打開 /dist 目錄下的文件，是可以直接在瀏覽器上運行的。

那麼我們可以約定這個流程如下：

1. 開發

在app目錄下開發，這時 /js 目錄下是ES6的代碼。

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
-- /css
-- index.html
gulpfile.js
package.json

2. 構建

使用gulp將js轉碼成ES5並壓縮，將css合併並壓縮。

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
---- app.js // 已經轉碼成了ES5
---- util.js // 已經轉碼成了ES5
-- /css
---- all.min.css // base.css + app.css 合併、壓縮並重命名的文件
-- index.html
gulpfile.js
package.json

3. 使用 bowserify

如果我們使用了ES6中的 module，通過 import、export 進行模塊化開發，那麼通過babel轉碼後， import 、 export 將被轉碼成符合CMD規範的 require 和 exports 等，但是瀏覽器還是不認識，這時可以使用 bowserify 對代碼再次進行構建。產生文件為 bundle.js

/app
-- /js
---- app.js
---- util.js
-- /css
---- base.css
---- app.css
/dist
-- /js
---- app.js // 已經轉碼成了ES5
---- util.js // 已經轉碼成了ES5
---- bundle.js // 實際引用的js文件
-- /css
---- all.min.css // base.css + app.css 合併、壓縮並重命名的文件
-- index.html
gulpfile.js
package.json

所以一開始 index.html 中引用的js文件和css文件就是 bundle.js 和 all.min.css

確定好流程後，就開始搭建開發環境吧。

一、新建項目

項目結構如下：

/app
-- /js
-- /css
/dist
-- /js
-- /css
-- index.html
gulpfile.js

我們的代碼在 /app 目錄下開發，轉碼、合併、壓縮完之後保存在 /dist 下。

二、配置環境

1） 初始化 npm

首先進入根目錄，初始化項目

$ npm init

2） 安裝 gulp

$ npm install gulp --save-dev

3） 安裝 gulp-babel

Babel是一個廣泛使用的ES6轉碼器，可以將ES6代碼轉為ES5代碼，從而在現有環境執行。

命令：

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

其中babel -preset-es2015 是ES2015轉碼規則，如果代碼中含有es7的內容，可以繼續安裝ES7不同階段語法提案的轉碼規則

（摘自阮一峯老師的ECMAScript 6入門）

# ES2015轉碼規則
$ npm install --save-dev babel-preset-es2015

# react轉碼規則
$ npm install --save-dev babel-preset-react

# ES7不同階段語法提案的轉碼規則（共有4個階段），選裝一個
$ npm install --save-dev babel-preset-stage-0
$ npm install --save-dev babel-preset-stage-1
$ npm install --save-dev babel-preset-stage-2
$ npm install --save-dev babel-preset-stage-3

4） 安裝其他gulp工具

以下是根據流程所需要安裝的全部工具

$ npm install gulp-rename gulp-concat gulp-uglify gulp-cssnano browserify vinyl-source-stream --save-dev

• gulp-rename
  重命名文件

• gulp-concat
  合併文件

• gulp-uglify
  壓縮js文件

• gulp-cssnano
  壓縮css文件

• browserify
  讓你使用類似於 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼

• vinyl-source-stream
  將Browserify的bundle()的輸出轉換為Gulp可用的vinyl（一種虛擬文件格式）流

至此環境已經搭建好了。接下來我們需要配置gulp，讓我們的工作更有效率。

三、配置 gulp

打開 gulpfile.js，編輯代碼如下

const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const cssnano = require('gulp-cssnano');
const concat = require('gulp-concat');
const browserify = require('browserify');
const source = require('vinyl-source-stream');

// 編譯並壓縮js
gulp.task('convertJS', function(){
  return gulp.src('app/js/*.js')
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'))
})

// 合併並壓縮css
gulp.task('convertCSS', function(){
  return gulp.src('app/css/*.css')
    .pipe(concat('app.css'))
    .pipe(cssnano())
    .pipe(rename(function(path){
      path.basename += '.min';
    }))
    .pipe(gulp.dest('dist/css'));
})

// 監視文件變化，自動執行任務
gulp.task('watch', function(){
  gulp.watch('app/css/*.css', ['convertCSS']);
  gulp.watch('app/js/*.js', ['convertJS', 'browserify']);
})

// browserify
gulp.task("browserify", function () {
    var b = browserify({
        entries: "dist/js/app.js"
    });

    return b.bundle()
        .pipe(source("bundle.js"))
        .pipe(gulp.dest("dist/js"));
});

gulp.task('start', ['convertJS', 'convertCSS', 'browserify', 'watch']);

通過 watch，我們可以在保存完代碼之後，讓gulp自動幫我們將代碼構建一遍，而不用自己再敲一遍命令。

開始 gulp

$ gulp start

現在就開始ES6開發之旅吧