1. 程式人生 > >前端學習札記之-----------gulp

前端學習札記之-----------gulp

1.

gulp是前端開發過程中對程式碼進行構建的工具,是自動化專案的構建利器;她不僅能對網站資源進行優化,而且在開發過程中很多重複的任務能夠使用正確的工具自動完成;使用她,我們不僅可以很愉快的編寫程式碼,而且大大提高我們的工作效率。

gulp是基於Nodejs的自動任務執行器, 她能自動化地完成 javascript/coffee/sass/less/html/image/css 等檔案的的測試、檢查、合併、壓縮、格式化、瀏覽器自動重新整理、部署檔案生成,並監聽檔案在改動後重復指定的這些步驟。在實現上,她借鑑了Unix作業系統的管道(pipe)思想,前一級的輸出,直接變成後一級的輸入,使得在操作上非常簡單。通過本文,我們將學習如何使用Gulp來改變開發流程,從而使開發更加快速高效。

gulp 和 grunt 非常類似,但相比於 grunt 的頻繁 IO 操作,gulp 的流操作,能更快地更便捷地完成構建工作

進行全域性安裝gulp,所執行的命令如下:

cnpm install -g rimraf

命令執行介面出現如下情況:

前面一步是啟動cmd命令,下面一步是使用rimraf 對node_modules進行刪除操作。

之後再使用cnpm install對專案預設的依賴重新啟動

執行過後結果如上圖所示。

當node.modules出現一些問題的時候,安裝gulp的全域性前端控制工具,刪除node。

等cnpm install安裝好node.modules之後顯示如下圖:

此時再進項相關的ng serve -- port=(埠你自己定),然後將http://loalhost:8090放到瀏覽器URL地址,即可。

如下圖所示:

至此:Angular專案啟動成功。