本文根據慕課網視訊教程《前端内容的自動化建構》整理。
建構是為了子產品化。 一、通過Browserify來實作JS代碼的子產品化 為什麼需要子產品化？——在實際的開發過程中，一個JS檔案可能會引入其他JS檔案，如果在其他JS檔案中都定義了全局變量，那麼最終可能就會引發沖突——全局變量污染，特别是多人協同開發時，你并不知道你在目前檔案中定義的全局變量是否會與他人在其他檔案中定義的全局變量同名。是以需要子產品化，用來隔離各個檔案内容，形成自己的命名空間，進而避免變量沖突。 browserify使用的子產品規範
browserify安裝 執行指令 npm install -g browserify 即可 browserify的使用 建立一個檔案夾，我命名為test，在檔案夾下建立幾個js檔案，如下：
再建立一個index.js來引用這幾個檔案：
然後通過browserify給這幾個檔案打包，并通過 -o指定一個輸出檔案main.js：
其實執行 browserify index.js -o main.js 就行，被引入檔案可以被自動找到。 打開main.js檔案如下：
打包完成！
二、使用 Gulp + Browserify來實作自動化建構 上面雖然實作了JS代碼建構，但是每次更改完JS檔案後又得手動執行一次指令，因而引入gulp來實作自動監控檔案變化進而完成建構。 Gulp——基于流的自動化建構工具 為什麼基于流？——Gulp的設計者認為：大多數需要建構的過程，都不隻需要一個步驟，如果不使用流，這個過程可能需要建立多個臨時檔案，才能達到效果；如果使用流，采用管道的形式，将一個步驟的處理結果輸送給另一個步驟，一切資料都存放在記憶體中，這樣減少了IO，進而提高了性能。
------gulp安裝------ 1. 全局安裝 gulp： npm install --global gulp 2. 作為項目的開發依賴（devDependencies）安裝，項目下會多出node_modules檔案夾： npm install --save-dev gulp 3. 在項目根目錄下建立gulpfile.js檔案，并添加内容：
使用gulp需先通過require引入gulp子產品，gulp通過 task這個api來執行任務， default是gulp的預設任務名，後面跟回調函數。 4.執行gulpfile.js檔案，執行指令 gulp即可。
可以看到，回調函數已經被執行了，接下來我們需要将回調函數内容替換為browserify建構語句。
------通過browserify實作JS的子產品化加載------ 1、安裝browserify子產品
2、更改gulpfile.js檔案。先引入browserify子產品跟fs子產品，其中fs子產品是node的核心子產品，是以不用install，然後在回調函數中執行js建構，browserify()完成初始化，add（）添加入口檔案，bundle傳回建構後的stream，pipe（）指定stream的輸出檔案。
3、删除掉之前的main.js檔案，執行指令gulp即可，建構出來的檔案與之前的一樣。
------使用 gulp.watch() 實作JS的自動化子產品加載------ 1、更改一下檔案目錄，如下，将所有輸入檔案放到asset目錄下：
2、安裝 run-sequence子產品，用于在gulpfile.js不同任務間的互相調用
3、更改gulpfile.js檔案
-
- 建立mainjs任務專門執行JS建構過程
- watch任務通過gulp的watch()方法來監聽asset下任意js檔案的變化，若發生變化，即在回調中通過run-sequence子產品調用mainjs任務進行重新建構
- default預設任務調用mainjs建構任務及watch監聽任務
4、執行gulp指令。之後更改asset檔案夾下的任意js檔案并儲存，不用再次手動執行gulp指令，即會自動完成重新建構
------使用 watchify 實作JS的自動化子產品加載------ 除了使用gulp的watch方法來監聽輸入檔案的變化，進而完成重新建構之外，browserify提供了一個watchify子產品來完成同樣的工作， 優點是性能較好，代碼可讀性較好。 1、安裝watchify
2、更改gulpfile.js檔案。在初始化browserify中指定 入口檔案和 watchify插件，之後通過watchify的 update方法監聽輸入檔案的變化，在回調中完成重新建構。
三、使用 Browserify加載第三方類庫 ------使用 Browserify 建構第三方類庫------ 為什麼需要建構第三方類庫？—— 如果我們需要通過script标簽加載多個第三方類庫，我們就可以通過建構的方式，将所有檔案建構成一個檔案，進而減少http請求。 （對第三方類庫的建構過程具體見 https://www.imooc.com/video/16188，這裡我沒做筆記）
------使用 gulp-uglify 壓縮JS代碼------ gulp-uglify是封裝後的UglifyJS，為了更好的在gulp中使用 在調用gulp-uglify對JS代碼進行壓縮前，有兩個問題需要解決。在之前的gulpfile.js中，調用bundle（）後生成的stream是标準的node stream，是不能被gulp識别的stream，gulp通過一個vinyl-fs檔案系統擴充卡來識别流，我們可以通過 vinyl-source-stream子產品來将node标準流轉化為vinyl流，而gulp-uglify不接收stream而接受buffer，是以還需要通過 vin-buffer子產品來将stream轉換為buffer，然後才能傳給uglify壓縮。 1、下面分别安裝着3個子產品 npm install gulp-uglify npm install vinyl-source-stream npm install vin-buffer 2、更改gulpfile.js檔案
source中參數main.js是用于存放vinyl stream的臨時檔案，最後一個pipe沒有寫明輸出檔案，我想這可能直接由上面的main.js決定了吧（不太清楚），執行gulp指令後，main.js就是經壓縮後的檔案
------使用 gulp-if 來條件判斷是否進行代碼壓縮------ gulp-if可以讓我們選擇是否要壓縮代碼，比如在開發環境下，我們可能并不想得到壓縮的代碼，而是想看看格式化良好的代碼；而在生産環境下，為了安全，我們需要得到壓縮後的代碼，這種時候就可以通過gulp-if子產品來實作。 1、安裝 gulp-if npm install gulp-if 2、更改gulp-if檔案。第11行通過判斷目前環境是否是生産環境，進而決定28行是否壓縮代碼（isProduction為true時壓縮）。第11行 process是指目前程序， env變量中包含目前進行的所有環境變量（資訊）， ENV表示開發或生産環境。
3、如果在本地直接執行 gulp指令，那麼得到的結果自然是未壓縮的代碼；如果想要看看生産環境下的情況，則執行 ENV=prod gulp
四、使用 coffeescipt 和 ES6 來優化代碼 ------使用 gulp-coffee 來編譯coffeescript------ coffeescript官方雖然提供了 coffee-script子產品來編譯coffeescript，但是為了在gulp中更好的實作編譯，這裡使用gulp-coffee子產品 1、安裝gulp-coffee npm install gulp-coffee 2、更改gulpfile.js檔案。先建立幾個coffeescript檔案，然後在gulpfile.js中建立任務 coffee
3、執行任務coffee，采用 “ gulp 任務名”指令來執行指定任務 gulp coffee 4、coffee檔案會編譯成JS檔案，js檔案與原來的coffee檔案同名，我們再通過建構JS的方式，完成對JS檔案的最終建構。注意，上面并沒有實作自動化，可以通過 gulp.watch()來實作自動化建構。
------使用 gulp-babel 編譯es6------ 跟gulp-coffee同理，為了在gulp中更好的使用babel，采用gulp-babel而沒用官方的babel-cli。 1、安裝所需子產品
2、在項目根目錄下建立 .babelrc檔案，内容如下，這是一個配置檔案，告訴babel轉換es2015即es6的代碼
3、将原先的a、b、c.js檔案改成es6的：（使用了箭頭函數）
3、更改gulpfile.js檔案，
第42行将編譯後的es5檔案放在build檔案夾下，檔案名與asset檔案夾下的es6檔案名對應。
五、CSS的前端建構
-------合并壓縮CSS代碼------- 通過 gulp-concat合并多個css檔案，再通過 gulp-clean-css壓縮最終生成的檔案 1、安裝子產品
2、建立style檔案夾，在檔案夾下建立幾個css檔案
3、更改gulpfile.js檔案
4、最終結果
下面是隻經合并，未經壓縮的css檔案
-------使用 gulp-sass 編譯sass代碼------- 1、安裝gulp-sass
我用npm安裝失敗，改用淘寶源的 cnpm安裝成功。 2、建立scss檔案夾，在檔案夾下建立2個scss檔案：
再建立一個index.scss檔案引入以上兩個檔案
3、更改gulpfile.js檔案
4、執行gulp指令，完成！會在根目錄下生成一個index.css檔案。
課程到此結束！