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

</div>

開始

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

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

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

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

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

一、新建項目

項目結構如下：

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

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

二、配置環境

1） 初始化 npm

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

$ npm init

2） 安裝 gulp

$ npm install gulp --save-dev

3） 安裝 gulp-babel

命令：

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

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

# 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</pre> 
 
4） 安裝其他gulp工具

以下是根據流程所需要安裝的全部工具
$ npm install gulp-rename gulp-concat gulp-uglify gulp-minify-css browserify vinyl-source-stream --save-dev
 
 
 
  
 
gulp-rename重命名文件 
 

 
gulp-concat合并文件 
 
 
gulp-uglify壓縮js文件 
 
 
gulp-minify-css壓縮css文件 
 
 
browserify讓你使用類似于 node 的 require() 的方式來組織瀏覽器端的 Javascript 代碼 
 
 
vinyl-source-stream將Browserify的bundle()的輸出轉換為Gulp可用的vinyl（一種虛擬文件格式）流 
 
</ul>
至此環境已經搭建好了。接下來我們需要配置gulp，讓我們的工作更有效率。
三、配置 gulp
 打開 gulpfile.js ，編輯代碼如下 
const gulp = require('gulp');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify');
const rename = require('gulp-rename');
const minifyCss = require('gulp-minify-css');
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(minifyCss({compatibility: 'ie8'}))
    .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']);
  gulp.watch('dist/*.html', ['convertJS']);
})
// 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']);</pre> 
 
 通過 watch ，我們可以在保存完代碼之后，讓gulp自動幫我們將代碼構建一遍，而不用自己再敲一遍命令。 

開始 gulp
$ gulp start
 
 
現在就開始ES6開發之旅吧
 </div>