React入門教程第二課--gulpfile詳解

相信你們看過很多項目，對這個文件的說明都不多。

不知道是你們默認了都會，仍是說默認都不去更改這個文件。

反正我剛開始看總以爲很難看懂。

這篇教程，我根據項目構建需求編寫這個文件。

將會對這個文件的內容作一個比較詳細的說明。

裏面用到的工具只保證知足需求，不保證是最好用的。

後續也會對這個文件作持續的優化。

1、首先咱們先看看如今的gulpfile.js。

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
gulp.task('default', function () {
    return browserify('./source/app.js')
        .transform(babelify)
        .bundle()
        .pipe(source('oni.js'))
        .pipe(gulp.dest('./build/'))
});

將這個任務更名爲buildJS

gulp.task('buildJS', function () {
    return browserify('./source/app.js')
        .transform(babelify)
        .bundle()
        .pipe(source('oni.js'))
        .pipe(gulp.dest('./build/'))
});

上一篇教程中我已經對這些內容作了詳細的說明，這裏再也不重複了。

2、上面是對js的簡單處理，接下來咱們加入對sass的編譯。

一、首先添加gulp-sass模塊

$ cd OniReact

$ npm install --save-dev gulp-sass

注：

#因爲UI組件庫內部使用的是SASS，因此框架裏面也使用SASS
#Windows環境須要Visual C++ 組件
#1) 安裝 .NET Framework 2.0 SDK；
#2) 安裝 Microsoft Visual Studio 2005；
#3) 若是將該組件安裝到了其餘位置，請將其位置添加到系統路徑中。

安裝sass時出現以上錯誤，可參考下載這兩個程序，嘗試安裝。只要安裝執行完畢，再試試sass能不能安裝。這兩個程序不須要所有安裝成功。這跟你電腦自己的環境有關係。

#下載：http://download.microsoft.com/download/5/f/7/5f7acaeb-8363-451f-9425-68a90f98b238/visualcppbuildtools_full.exe?__hstc=268264337.e725531c29a2a967a67a93da74b55322.1474945795781.1474945795781.1474945795781.1&__hssc=268264337.1.1474945795783&__hsfp=414218078&fixForIE=.exe
#下載：http://download.microsoft.com/download/D/2/3/D23F4D0F-BA2D-4600-8725-6CCECEA05196/vs_community_ENU.exe

在gulpfile頭部引用模塊  var sass = require('gulp-sass');

gulp.task('buildCSS', function () {
    gulp.src('./style/app.scss')
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
        .pipe(sass())
        .pipe(gulp.dest('./build'))
})

src;這裏指監聽入口。通常選擇主sass文件。

中間配置使用gulp-sass解析

最後dest指輸出位置。

二、在style文件夾下新建app.scss文件

三、執行這個task將會在build文件夾下生成一個app.css文件

 $ cd OniReact

$ gulp buildCSS

注：我這裏項目名字被我修改過，大家跟着教程就好，不用理會這個圖裏的地址。

打開build文件夾下的index.html在裏面引用生成的css文件。

<link rel="stylesheet" href="app.css?v=001"/>

3、設置默認的gulp的task

gulp.task('default',['buildJS','buildCSS']);

$ gulp 執行，將會自動執行buildJS和buildCSS這兩個任務。

4、添加監聽

其實咱們最主要的就是編譯js和編譯css，如今的寫法已經可以知足基本的使用需求了。

可是如今沒寫完一行代碼，想要查看效果就要編譯一次。

因而在這裏引入監聽，當文件更改是自動執行編譯。

一、編寫監聽source

gulp.task('watchSource', function () {
    gulp.watch('./source/**/*', ['buildJS'])
});

監聽文件source下的任意文件或者文件夾下面的任意文件。

當文件更改時，執行buildJS。

二、編寫監聽style

gulp.task('watchStyle', function () {
    gulp.watch('./style/**/*',['buildCSS'])
})

三、修改默認任務

gulp.task('default',['watchSource','watchStyle']);

四、執行gulp

$ gulp

此次執行跟以前幾回的不一樣，在執行完成以後命令行並無中止，而是一直在監聽。

注：須要關掉開發工具的自動保存功能。方法自行查閱資料

如今咱們作一個簡單的測試，驗證功能可用。

五、測試監聽css

在style/app.scss裏面鍵入

div{
  height: 100px;
}

按下保存。命令行裏自動執行編譯

六、測試監聽js

在source/app.js裏修改'Hello Word'，改爲 'Hello Word...'保存。

5和6能夠直接查看build下面的對應文件查看。

5、處理代碼錯誤。

一、首先假設說咱們在編程的時候出現了語法錯誤。

css錯誤

命令行中輸出以下log，而且關閉gulp。咱們在修改完成以後，還要在執行$ gulp

如今咱們加入錯誤機制，只打印錯誤信息，不關閉gulp。（任何繁瑣的行爲都是錯誤的。好比一直輸入gulp）

一樣的看一下js錯誤

二、添加事件模塊和日誌模塊

$npm install --save-dev gulp-plumber

var plumber = require('gulp-plumber');//事件

$npm install --save-dev gulp-notify

var notify = require('gulp-notify');//錯誤

三、在buildCSS中加入

.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))

如：

gulp.task('buildCSS', function () {
    gulp.src('./style/app.scss')
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
        .pipe(sass())
        .pipe(gulp.dest('./build'))
});

測試發現css錯誤，會報錯可是不會中止gulp。是咱們預期的功能。

在buildJS中一樣處理。（官方好像說明過這個，我以前看材料看到了，此次去找沒找到。）

可是js錯誤，仍是會中止gulp。

因此咱們使用監聽錯誤事件的方式來處理。

.on('error', function(err){
    var args = Array.prototype.slice.call(arguments);
    notify.onError({
        title: "Build JS Error",
        message: "<%= error.message %>"  }).apply(this, args);
    this.emit('end');
})

遇到錯誤打印錯誤信息以後，直接中止此次編譯。這樣就不會關閉gulp了。

修改完buildJS以下：

gulp.task('buildJS', function () {
    return browserify('./source/app.js')
        .transform(babelify)
        .bundle()
        .on('error', function(err){
            var args = Array.prototype.slice.call(arguments);
            notify.onError({
                title: "Build JS Error",
                message: "<%= error.message %>"  }).apply(this, args);
            this.emit('end');
        })
        .pipe(source('oni.js'))
        .pipe(gulp.dest('./build/'))
});

測試可用，當發生錯誤時，命令行中輸出，gulp沒有關閉。

6、創建web服務器

一、添加模塊gulp-webserver

$ npm install --save-dev gulp-webserver

二、編寫task

gulp.task('webserver', function () {
    gulp.src('build').pipe(webserver({
        port:8897,
        fallback: 'index.html',
        open:true  }))
});

src是指web-server的目錄，port設置端口號，fallback是啓動入口，open是設置是否自動打開瀏覽器，我這裏設置true，執行這個task就會本身打開一個頁面。

三、修改gulp默認task

gulp.task('default',['watchSource','watchStyle','webserver']);

四、執行gulp

$ gulp

7、混淆壓縮代碼

一、引入模塊varuglify=require('gulp-uglify');//壓縮

$ npm install -save-dev gulp-uglify

在buildJS中加入.pipe(uglify())

gulp不支持的流，添加管道。這部分的內容我不是很清楚是什麼意思，我只知道這麼用。

二、引入模塊var streamify = require('gulp-streamify');

$ npm install -save-dev gulp-streamify
修改.pipe(streamify(uglify()))，修改後的buildJS以下：
gulp.task('buildJS', function () {
    return browserify('./source/app.js')
        .transform(babelify)
        .bundle()
        .on('error', function(err){
            var args = Array.prototype.slice.call(arguments);
            notify.onError({
                title: "Build JS Error",
                message: "<%= error.message %>"  }).apply(this, args);
            this.emit('end');
        })
        .pipe(source('oni.js'))
        .pipe(streamify(uglify()))
        .pipe(gulp.dest('./build/'))
});
平時開發把.pipe(streamify(uglify()))註釋掉。發佈的時候再開起來就能夠了。
這個教程只是作一個技術提要，不要將這個文件用於實際的項目中，這裏面有坑，我將會在下一個教程中對這個文件進行優化。
到此本節課的內容所有講解完畢，關於以上內容有不瞭解的地方，能夠經過評論的方式，留言，我會給出參考文獻連接。
項目地址：https://Git.oschina.NET/xiaohuOni/OniReact-Demo
SVN地址：svn://git.oschina.net/xiaohuOni/OniReact-Demo
以前的demo都用百度雲盤，後來所有過時了。

題外話：

以前的ionic的公衆號被我更名了，由於開始更新React的內容，後續可能會更新其餘的。

一時想不到什麼好名字，就用我本身的網名命名了，你們有什麼好的名字能夠直接回復公衆號。

一年可以修改一次，呵呵。

請你們關注公衆號:ionic__ 呵呵，這個不讓改。