前言：

在這里，你先要去基本知道 ?npm ?和 ?cnpm，不知道的 ?分別取自行百度。

相關demo代碼 ?請移步寶寶的 github倉庫：

https://github.com/ChaoyaoYe/gulp_test.git

第一步 ?在全局安裝gulp的腳手架

運行cmd ? 在任意目錄下，輸入$cnpm install gulp -g

也就是安裝gulp全局腳手架的意思

驗證：在任意目錄，輸入 $gulp -v ?如果會出現反饋就代表第一步成功，反饋圖如下：

第二步 下載寶寶寫好的gulp最簡化的一個demo

下載地址，請移步github鏈接如下：https://github.com/ChaoyaoYe/gulp_test.git
將下載下來的zip壓縮包解壓，或者是你clone下來的repositorie倉庫，目錄結構如下：

第三步 ?本地安裝項目所需的模塊

括號里的是簡單解釋為什么，看不懂耶沒關系 ? 只要做了就可以 ? 多寫幾遍，其義自見。

A、cmd ?基于第二部的倉庫目錄里，運行$ cnpm i

（這是安裝gulp壓縮 合并 css? html img? 必須的npm模塊，需要哪些模塊有在package.json里的devDependencies字段說明）

安裝完后會多出node_modules這個文件夾

第四步 ?創建你的生產環境目錄

在上面的文件夾里，創建一個src文件夾，并且把你的項目文件，放進來，做完后，寶寶的文件目錄樹結構如下：

接著只要在這個目錄下運行 ?$gulp default 就會自動壓縮css ?js ?html ?img 了，是輸出到dest的文件夾里。

到這里就大功告成了。

后話：

這里，其實還有2個沒解決，

第一個問題是：

如果啟用了合并功能，js、css和自動合并為all.js ? all.css

可是html的標簽依然為 ?

script ? a.js

script ?b.js

link ? a.css

link b.css

這個還不知道怎么解決 ? 感覺還是不夠自動化構建

第二個問題是：

寶寶的項目是依賴于requireJS寫的 ? 應該先引入 require ? 再引入JQ ?再引入依賴于JQ的其他js

但是一旦js合并，依賴關系好像就亂了。

所以，基于以上2個問題，我的建議是暫時先別css、js合并 ?只壓縮就好，知道怎么解決的高手也可以告訴寶寶。

這個教程寫的比較粗糙 ? 還少了一個常用功能 ? es6 ?轉 ?es5，下次會補齊，祝大家新年快樂， 寶寶新年大發O(∩_∩)O哈哈~