React入門教程第三課--gulp編譯優化

上節課中我提到了，在gulpfile中編寫task編譯js和sass的task。

而後在項目中使用時發現，當項目內容越寫越多時，編譯速度會愈來愈久。

看了一下編譯過程。上次gulpfile中的定義是當監聽文件改變時就執行編譯所有js文件。

查閱資料--gulp編譯加速

在出來的結果中首條信息是博客園的如何在Gulp中提升Browserify的打包速度

看了下教程沒怎麼明白，按照連接點擊去看了他的源代碼，一個文檔裏面寫了看起來很像加速的東西，可是我並不知道怎麼加到本身的項目中。

而後該教程中提到了watchify，因而就查了gulpwatchify，第一條信息是gulp中文網的

使用 watchify 加速 browserify 編譯

連接地址：http://www.gulpjs.com.cn/docs/recipes/fast-browserify-builds-with-watchify/

原文內容：

當一個 browserify 項目開始變大的時候，編譯打包的時間也會慢慢變得長起來。雖然開始的時候可能只需花 1 秒，而後當你的項目須要創建在一些流行的大型項目的基礎上時，它頗有可能就變成 30 秒了。

這就是爲何 substack 寫了 watchify 的緣由，一個持續監視文件的改動，而且 只從新打包必要的文件 的 browserify 打包工具。用這種方法，第一次打包的時候可能會仍是會花 30 秒，可是後續的編譯打包工做將一直保持在 100 毫秒如下 —— 這是一個極大的提高。

watchify 並無一個相應的 gulp 插件，而且也不須要有：你可使用 vinyl-source-stream 來把你的用於打包的 stream 鏈接到 gulp 管道中。

頁面提供的源代碼寫的很好，我在裏面增長了註釋說明。

'use strict';

var watchify = require('watchify');
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var buffer = require('vinyl-buffer');
var gutil = require('gulp-util');
var sourcemaps = require('gulp-sourcemaps');
var assign = require('lodash.assign');  //這個模塊是用來鏈接對象的好比var a = {a_p:1}  var b = {b_p:2} var c = assign{{},a,b}  則對象c其實是{a_p:1,b_p:2}
//項目中使用object-assign代替，用習慣了而已，沒有爲何要換
// 在這裏添加自定義 browserify 選項
var customOpts = {
  entries: ['./src/index.js'],//<span style="font-family: Arial, Helvetica, sans-serif;">browserify </span><span style="font-family: Arial, Helvetica, sans-serif;">主入口</span>
  debug: true
};
var opts = assign({}, watchify.args, customOpts);//把watchify的屬性和browserify的屬性鏈接起來 assign的用法看上面註釋
var b = watchify(browserify(opts));定義一個使用watchify監聽的browserify事件（<span style="font-family: Arial, Helvetica, sans-serif;">或者說對象</span><span style="font-family: Arial, Helvetica, sans-serif;">）。</span>

// 在這裏加入變換操做
// 好比： b.transform(coffeeify);

gulp.task('js', bundle); // 這樣你就能夠運行 `gulp js` 來編譯文件了
b.on('update', bundle); // 當任何依賴發生改變的時候，運行打包工具
b.on('log', gutil.log); // 輸出編譯日誌到終端

function bundle() {
  return b.bundle()
    // 若是有錯誤發生，記錄這些錯誤
    .on('error', gutil.log.bind(gutil, 'Browserify Error'))
    .pipe(source('bundle.js'))
    // 可選項，若是你不須要緩存文件內容，就刪除
    .pipe(buffer())
    // 可選項，若是你不須要 sourcemaps，就刪除
    .pipe(sourcemaps.init({loadMaps: true})) // 從 browserify 文件載入 map
       // 在這裏將變換操做加入管道
    .pipe(sourcemaps.write('./')) // 寫入 .map 文件
    .pipe(gulp.dest('./dist'));
}

以上代碼均來自gulp中文網。

如今我來談談怎麼在項目中使用它。

添加三個模塊

var watchify = require('watchify');
var gutil = require('gulp-util');
var assign = require('object-assign');

咱們修改幾個跟咱們項目先關的內容。

一、修改task名字

gulp.task('watchSource', bundle);

二、修改browserify配置

// 在這裏添加自定義 browserify 選項 var customOpts = {
    entries: ['./source/app.js'],
    debug: true };

三、加入變換操做，react項目中須要加入presets，如今的項目加了會報錯。本次demo中沒加，後續用到的時候，再添加進去。

b.transform(babelify,{presets:["react"]});

四、修改build函數

function bundle() {
    return b.bundle()
        // 若是有錯誤發生，記錄這些錯誤，按照教程寫的bind並不能用  .on('error', gutil.log)

 // 刪掉了沒有用到的buffer和sourcemaps等內容
 // 增長壓縮代碼uglify，在下方的pipe，當須要壓縮代碼是取消下方的註釋

        .pipe(source('oni.js'))
        //須要壓縮就打開  //.pipe(streamify(uglify()))  .pipe(gulp.dest('./build'));
}

執行

$ cd OniReact

$ gulp

能夠看到當前編譯須要1.6秒左右,修改以後再編譯須要0.26秒。當項目比較大時這個優化效果是很明顯的。

修改後的gulpfile以下：

var gulp = require('gulp');
var browserify = require('browserify');
var babelify = require('babelify');
var source = require('vinyl-source-stream');
var sass = require('gulp-sass');
var plumber = require('gulp-plumber');//事件
var notify = require('gulp-notify');//錯誤
var uglify = require('gulp-uglify');//壓縮
var streamify = require('gulp-streamify');
var webserver = require('gulp-webserver');//服務
var watchify = require('watchify');
var gutil = require('gulp-util');
var assign = require('object-assign');
// 在這裏添加自定義 browserify 選項
var customOpts = {
    entries: ['./source/app.js'],
    debug: true
};
var opts = assign({}, watchify.args, customOpts);
var b = watchify(browserify(opts));
// 在這裏加入變換操做
// 好比： b.transform(coffeeify);
b.transform(babelify);
gulp.task('watchSource', bundle); // 這樣你就能夠運行 `gulp watchSource` 來編譯文件了
b.on('update', bundle); // 當任何依賴發生改變的時候，運行打包工具
b.on('log', gutil.log); // 輸出編譯日誌到終端
function bundle() {
    return b.bundle()
        // 若是有錯誤發生，記錄這些錯誤，按照教程寫的bind並不能用
        .on('error', gutil.log)
        // 刪掉了沒有用到的buffer和sourcemaps等內容
        // 增長壓縮代碼uglify，在下方的pipe，當須要壓縮代碼是取消下方的註釋
        .pipe(source('oni.js'))
        //須要壓縮就打開
        //.pipe(streamify(uglify()))
        .pipe(gulp.dest('./build'));
}
gulp.task('buildCSS', function () {
    gulp.src('./style/app.scss')
        .pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
        .pipe(sass())
        .pipe(gulp.dest('./build'))
});
gulp.task('watchStyle', function () {
    gulp.watch('./style/**/*',['buildCSS'])
})
gulp.task('webserver', function () {
    gulp.src('build').pipe(webserver({
        port:8897,
        fallback: 'index.html',
        open:true
        //host:'172.16.9.68' 可設置成本機ip供聯網調試
    }))
});
gulp.task('default',['watchSource','watchStyle','webserver']);

如今這樣的gulp配置還蠻好用的，編譯快速，監聽錯誤，起一個web服務器。

可是還存在一個問題，當代碼出現語法錯誤時，打印的日誌內容有點詳細，包含代碼的位置及其餘的一些詳細內容。

我只截取了一部分，紅色框內的內容是我想保留下來的。查了些資料，沒有找到方案，但願知道怎麼弄得朋友能夠指導一下。

到此本節課的內容所有講解完畢，關於以上內容有不瞭解的地方，能夠經過評論的方式，留言，我會給出參考文獻連接。
項目地址：https://Git.oschina.NET/xiaohuOni/OniReact-Demo
SVN地址：svn://Git.oschina.NET/xiaohuOni/OniReact-Demo
以前的demo都用百度雲盤，後來所有過時了。

題外話：

無，今天不想說話。。。

請你們關注公衆號:ionic__