手把手教你怎麼搭建angular+gulp的項目（一）

　　大多時候，咱們要學習一個新東西，不是不願去學，而是不知道該如何開始。好比學angular，我要怎麼開始學？怎麼應用到本身項目中？這篇文章就是我根據本身邊學習邊應用，構建一個項目的切身體會，來說下怎麼開始一個angular項目，但願能幫到你們。

　　首先，做爲一個程序員，咱們須要git，Github上那麼多資源，有了git，咱們能夠更方便地下載各位大神的開源代碼。

　　其次，做爲一個前端程序員，node這麼火，咱們難道不該該跟緊腳本，立刻下載一個nodejs嗎？

　　既然前提軟件已備好，gulp及angular是什麼我就不講了，只講怎麼用。

　　一、全局安裝gulp及bower

　　打開windows控制檯，快捷鍵win+R運行cmd

　　

　　肯定後 運行npm install gulp -g

　　

　　安裝完成後，運行 gulp -v 來確認是否安裝完成。

　　同理安裝bower。

　　二、規劃文件目錄結構

　　文件目錄的規劃很重要，我這裏規劃以下：

　　

　　app：生產環境代碼目錄，partials下放路由的頁面，temp下放指令引用的模板文件；

　　src：源代碼目錄；

　　vendor：第三方插件目錄；

　　index.html：入口html文件。

　　

　　js目錄根據模塊劃分，而不是根據controller/filter/service來劃分，這樣會很是清晰，什麼功能模塊的代碼在哪裏。common爲公用模塊，全部模塊均可複用的東西。

　　建議文件目錄的規劃根據實際狀況來。

　　三、使用gulp

　　打開windows控制檯，cd到這個文件夾的src目錄下

　　

　　win10能夠如上圖，在src下按住shift鍵，鼠標在空白處右擊，選中在此處打開命令窗口。

　　win7能夠敲命令

　　而後運行npm init

　　

　　接下來的選項能夠按Enter鍵，都默認。完成後能夠看到src目錄下多了個package.json文件。

　　

　　接下來在src目錄下手動新建一個gulpfile.js文件，注意名字不能錯。

　　接下來須要在src目錄下，運行 npm install gulp --save-dev。這命令的意思是將gulp做爲開發環境的依賴項安裝在此項目中。

　　因爲咱們須要不少gulp工具，好比拼接js的工具，壓縮代碼的工具，代理服務的工具等等。此處咱們只寫個小小的例子，只須要拼接js文件的工具「gulp-concat」，以及代理服務工具「gulp-webserver」等，到時發現工具少了再安裝，哈哈哈。

　　運行 npm install gulp-concat gulp-webserver --save-dev 。安裝完成後，能夠在src/package.json文件下看到變化。

　　

　　接下來，咱們用gulp執行一個小任務。在gulpfile.js文件中編寫以下代碼：

　　

　　而後在命令窗口運行gulp

　　 

　　會發現默認瀏覽器被打開，展現的就是index.html，這就是gulp-webserver啓動了本地服務。gulp的工具怎麼用，能夠去npm官網查詢。

　　四、使用bower

　　在src目錄下運行bower init

　　

　　按enter鍵默認選項。完成後，能夠看到src下有一個bower.json文件。

　　接下來使用bower 安裝 angular。執行 bower install angular --save

　　安裝成功後，能夠在src/bower_components目錄下看到angular插件。

　　

　　今天先作到這裏，接下來的東西就是怎麼用angular寫代碼，以及gulp具體怎麼處理代碼。