gulp的使用(三)之把gulp運用到項目實戰中

 

在瞭解了上面的gulp(一)(二)之後,咱們就能夠開始在項目中具體使用了,具體使用流程以下:

1. 建立一個project文件夾,而後裏面首先建立一個src文件夾,裏面放置開發要用到的文件夾:

 

2. 在project下打開git命令窗口(也能夠windows自帶的命令行):

 

3. 輸入命令:

npm install -g gulp --registry=https://registry.npm.taobao.org

實現全局安裝gulp;( 只須要執行一次，若是已經執行過了，就不須要再去執行。Gulp -v 有版本號，表明已經執行過了)

 

在項目中輸入命令: npm init –f 實現切換到項目目錄,此時會生成package.json文件

而後輸入命令: npm install gulp --registry=https://registry.npm.taobao.org

生成node_modules文件夾,這個文件夾是項目依賴包

(以上的操做都是基於安裝了node,配置好了nvm和npm環境的基礎下的):

    截圖代碼以下:

 

 

 

生成的文件夾以下所示:

 

4. 在項目目錄下建立一個叫gulpfile.js文件: 這個文件是用於自動化管理項目的(即gulp任務管理清單),裏面本身能夠寫一些圖片壓縮,代碼醜化,less自動編譯的功能. 這裏咱們直接拿別人編寫好的使用便可(在第二篇的時候能夠直接把代碼拷貝下來):

 

5. 拿出封裝好的less文件(好比字體rem轉換文件,通常作webApp開發的時候公司都會提供的兩個公共less文件),而後在index.less下用@import的方式導入進去:

 

6. 使用bower下載angular(前提是你得安裝了bower,安裝的命令是 npm install -g bower,也能夠檢查你是否安裝了bower: bower -v)

u輸入命令安裝angular: bower install angular anglar-ui-router

 

 

7. 安裝好了之後,就執行命令gulp,會生成以下文件,而且會自動打開瀏覽器實現無刷新自動更新內容: (這個步驟其實能夠放在前面執行,只是一開始src沒有建立文件體現不出效果)

 

其中,因爲gulpfile.js的自動構建功能,

build文件夾是瀏覽器執行的文件,裏面包含了less編譯好的css文件等,全部index.html中導入的外部文件的路徑,都是要參考build文件下的,而不是src文件下的. 通過gulpfile.js文件的自動化管理,全部的導入的外部less文件,最後都會變成一個index文件.

dist文件夾是發佈文件,

src文件是開發的文件夾,通過gulp命令執行後,都會把文件整合到build文件夾下.全部的代碼都是寫在src下的,運行的文件都是build文件夾下的

 

下圖是通過gulp命令執行後的buid文件:

 

 

 

8. 參照build下面的文件夾,在src文件夾中的index.html文件導入相關css,js等外部文件:

由於瀏覽器上運行的是build文件夾

 

9. 而後能夠在src中的js文件夾,css文件夾中任意再建立文件夾,並在新建立的文件中添加文件,由於反正最後通過gulp自動化管理之後,都會自動變成一個index文件:

 

10. 另外,能夠在編譯器中直接使用命令行,有時候頁面或者build文件夾沒有刷新的時候,能夠輸入命令: gulp;

若是使用webstorm開發,裏面有自帶的命令行;