使用gulp 進行ES6開發

一提及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

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

1、新建項目

項目結構以下：

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

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

2、配置環境

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，讓咱們的工做更有效率。

3、配置 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開發之旅吧