上節課中我提到了，在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'); 我們修改幾個跟我們項目先關的內容。 1、修改task名字 gulp.task('watchSource', bundle); 2、修改browserify配置 // 在這里添加自定義 browserify 選項 var customOpts = {entries: ['./source/app.js'],debug: true }; 3、加入變換操作，react項目中需要加入presets，現在的項目加了會報錯。本次demo中沒加，后續用到的時候，再添加進去。 b.transform(babelify,{presets:["react"]}); 4、修改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__

轉載于:https://www.cnblogs.com/xiaohuoni/p/7642287.html

總結

以上是生活随笔為你收集整理的React入门教程第三课--gulp编译优化的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。