Gulp縱享絲滑 | Writing React with Gulp

Node.js

首先是確定要有node滴（這不是廢話嗎Orz...），若是尚未安裝的話請自行詢問你最喜歡的搜索引擎，相信她必定會很優雅的告訴你如何在或Windows或Mac或Linux上安裝Node噠。

Initialize Your Project

進入項目的目錄，而後↓

cnpm init

根據命令行的提示建立項目的package.json文件，固然了，你也能夠本身手動建立這個文件（講道理應該不多人會這麼作吧...）。我用的是npm cnpm，它在國內能夠完美的代替npm，而且得到更快的包安裝速度，詳情請訪問淘寶鏡像官網。

Install Gulp

接下來就要安裝gulp了，我首先進行全局安裝 ↓

cnpm install -g gulp

全局安裝的目的是爲了經過它來執行gulp任務。
Next，本地安裝 ↓

cnpm install --save-dev gulp

安裝完成以後打開package.json文件，就會發現gulp被寫在了devDependencies字段裏，成爲項目的開發階段依賴。本地安裝gulp的目的是爲了成功的調用gulp插件。

Install Gulp Plugins

Gulp是一款用來實現自動化的構建工具，諸如壓縮代碼、合併腳本、自動刷新等任務，都是經過gulp在項目中調用各類各樣的插件來實現的。正所謂工欲善其事必先利其器，工欲利其器必先get其器，先來安裝這些插件吧 ↓

cnpm install --save-dev browserify vinyl-source-stream babelify babel-preset-es2015 babel-preset-react gulp-streamify gulp-uglifyjs gulp-connect

一口氣裝了這麼多插件，他們都是幹什麼的呢？

1. browserify: 實現瀏覽器端的模塊和依賴管理——約定用require()來引用模塊，用module.exports來導出模塊。

2. vinyl-source-stream: 這個插件的做用是轉換流模式，若是咱們須要將gulp及gulp插件和常規的可讀流一塊兒使用，就須要先把可讀流轉換爲vinyl。

3. babelify, babel-preset-es2015, babel-preset-react: 用來編譯es6以及react的jsx爲瀏覽器能夠識別的js。

4. gulp-streamify: 將當前插件的輸出轉化爲可讀流，使得其後的只能操做可讀流的插件正常工做。

5. gulp-connect: 起服務器+自動刷新的一條龍服務。

6. gulp-uglifyjs: 看名字就知道了，醜化js。

Edit your Gulpfile.js

gulp會根據gulpfile.js這個文件去執行用戶自定義的gulp任務，因此這是整個gulp構建中最重要的一步。
Talk is cheap, show u the code ↓

//gulpfile.js
var gulp = require('gulp');
var connect = require('gulp-connect');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var babelify = require('babelify');
var uglify = require('gulp-uglifyjs');
var streamify = require('gulp-streamify');

gulp.task('connect', function(){//起服務器
        connect.server({
                root: './',
                port: '3000',
                livereload: true,
                host: 'localhost'
        });
});

gulp.task('bundle', function(){//打包
        return browserify({entries: './src/main.js', extensions: ['jsx'], debug: true})
                .transform(babelify,{
                        presets: ['es2015','react']
                })
                //.transform(require('browserify-shim'))
                .bundle()
                .pipe(source('bundle.js'))
                .pipe(streamify(uglify()))
                .pipe(gulp.dest('./dist'))
                .pipe(connect.reload());//重啓（刷新）
});

gulp.task('watch', function(){//監聽須要改動的文件，指定發生變更時執行的任務，並在命令行輸出被改動的文件路徑和變更類型
        var watcher = gulp.watch(['./src/*.js','./src/*/*.js'],['bundle']);
        watcher.on('change', function(event){
                console.log(event.path + ' was ' + event.type + ', bundle again...');
        });
});

gulp.task('default',['bundle','connect','watch']);

就是這樣一個gulpfile.js文件，幫咱們實現了先將es6和jsx編譯成es5（反正是瀏覽器能夠讀懂的js）；再將代碼打包成dist目錄下的bundle.js並醜化之（固然，若是在開發過程當中沒有醜化代碼的需求的話也能夠不要這一步），因此在html文件中就只須要引用bundle這個js文件就能夠了:)；最後實現了對代碼的監聽，若發生變更則自動從新打包再刷新瀏覽器，對手動刷新say goodbye，縱享絲滑。
這裏注意到在bundle任務中有一行任務被註釋掉了，解釋一下：由於項目依賴了React（react + react-dom），因此當執行完一次bundle任務後，在不壓縮的狀況下，打包成的bundle.js有1M左右，壓縮後也有200k。這行被註釋掉的代碼，其做用就是在打包的時候忽略依賴的庫或框架，這樣就能大大縮小打包結果文件的體積，可是若是要這麼作，你須要：

1. 在html文件中用script標籤引入被忽略模塊

2. 爲package.json文件增長配置，說明須要忽略的模塊：

{
  "browserify-shim": {
    "react": "global:React",
    "react-dom": "global:ReactDOM"
  }
}

將全部的任務寫在一個名爲default的gulp任務內，保證在命令行只須要敲一個gulp就能夠執行全部的任務。

Gulp！

如今已經完成了全部的工做了，接下來的事情就交給gulp去作吧。
進入項目目錄，輸入命令：

gulp

如今你就能夠專心於coding啦。

What U Always Need to Do ↓

1. Make sure u have installed Nodejs

2. Use npm init cnpm init to initialize ur project

3. Install gulp

4. Install the gulp plugins u need

5. Edit ur gulpfile.js

6. Run gulp

Recommand