Github+yeoman+gulp-angular初始化搭建angularjs前端項目框架

在上篇文章裏面咱們說到了Github帳號的申請與配置

那麼當你有了Github帳號並建立了一個本身的Github項目以後，首要的固然是搭建本身的項目框架啦！

本人對本身的定位是web前端狗，經常使用開發框架是angular，因此在這裏主要說Github+yeoman+gulp-angular初始化搭建angularjs前端項目框架。

 

什麼是Yeoman？

Yeoman是Google的團隊和外部貢獻者團隊合做開發的，他的目標是經過Grunt（一個用於開發任務自動化的命令行工具）和Bower（一個HTML、CSS、Javascript和圖片等前端資源的包管理器）的包裝爲開發者建立一個易用的工做流。

Yeoman的目的不只是要爲新項目創建工做流，同時仍是爲了解決前端開發所面臨的諸多嚴重問題，例如零散的依賴關係。

Yeoman主要有三部分組成：yo（腳手架工具）、grunt（構建工具）、bower（包管理器）。這三個工具是分別獨立開發的，可是須要配合使用，來實現咱們高效的工做流模式。

下面這幅圖很形象的代表了他們三者之間的協做關係。

 

Yeoman特性

閃電般的初始化：項目開始階段，能夠基於現有的模板框架（例如：HTML5 Bolierplate、Twitter Bootstrap）進行項目初始化的快速構建。

了不得的構建流程：不只僅包括JS、CSS代碼的壓縮、合併，還能夠對圖片和HTML文件進行優化，同時對CoffeScript和Compass的文件進行編譯。

自動編譯CoffeScript和Compass：經過LiveReload進程能夠對源文件發生的改動自動編譯，完成後刷新瀏覽器。

自動Lint代碼：對於JS代碼會自動進行JSLint測試，確保代碼符合最佳編程實踐。

內置的預覽服務器：再也不須要本身配置服務器了，使用內置的就能夠快速預覽。

驚人的圖片優化：經過使用OptiPNG和JPEGTran來優化圖片，減小下載損耗。

殺手級包管理：經過bower search jQuery，能夠快速安裝和更新相關的文件，再也不須要打開瀏覽器本身搜索了。

PhantomJS單元測試：能夠很是方便的使用PhantomJS進行單元測試，一切在項目初始的時候都準備好了。

 

Yeoman安裝前的準備工做

檢查系統中是否安裝了：Node.js、Ruby、Compass。

Mac下安裝Node.js很是方便，首頁提供了一個pkg下載，雙擊後能夠默認安裝node、npm到/usr/local/bin下，咱們只須要確保/usr/local/bin包含在PATH變量中就能夠。

Mac Mountain Lion 下自帶了Ruby，因此也就不須要再單獨安裝了。

Compass安裝須要依賴於Ruby Gems，執行下面的步驟：

$sudo gem update --system
$sudo gem install compass

 

安裝Yeoman

環境準備好以後，就能夠進行安裝了，執行：

$sudo npm install -g yo

安裝成功後，會看到下面的提示：

 

安裝生成器（generator）

安裝好yo 以後呢，咱們須要在安裝咱們須要的生成器，什麼是生成器呢？其實就是項目模板，而Yo只是建立這模板的指揮員而已

因此，咱們須要選擇咱們複合需求的生成器，官網裏已經有不少已經搭建好的生成器，詳情

而命令也很簡單，今天咱們主要用gulp-Angular這個生成器

在這以前，先安裝依賴的gulp和bower

$sudo npm install -g yo gulp bower

而後，安裝生成器

$sudo npm install -g generator-gulp-angular

 

 運行生成器

 安裝完成後，咱們先建立一個咱們的項目目錄（最好與github上面的倉庫同名），並進入目錄

$mkdir 文件名 && cd $_

而後運行咱們的生成器

yo gulp-angular

以後只要按照terminal裏面給出的提示選擇咱們須要安裝的包就能夠了

 

gulp-Angular生成器解析

執行完以上步驟之後，文件目錄應該大體以下：

若是沒有bower_componets或者node_modules目錄，那就須要手動安裝了,執行

$npm install   // 生成node_modules
$bower install // 生成bower_componets

• bower_componets: bower.json中的依賴包目錄

• e2e: 測試目錄

• gulp: gulp配置目錄

• node_modules: package.json裏面依賴包目錄

• src: 源文件目錄（也就是咱們主要編碼，處理過的）

• .bowerrc: bower配置文件，能夠設置安裝位置

• .gitignore: 配置Git上傳時忽略文件名

• bower.json: bower 安裝的依賴配置

• gulpfile.js: gulp 運行的入口文件，和makefile同理

• karma.conf.js: karma 測試文件

• package.json: npm 安裝的配置

• protractor.conf.js: Angular 專門的測試框架

 接着，在項目根目錄執行

$gulp

會多出.tmp和dist目錄

• .tmp: 處理過程的臨時文件

• dist: 進行各類注射，壓縮等處理後的項目文件

 

將初始化好的前端項目框架push到github遠程倉庫

首先在文件目錄下輸入

$git init

將其初始化爲一個git本地倉庫

而後輸入

$git remote add origin 你須要鏈接的遠程倉庫的HTTPS/SSH

將你的本地倉庫與遠程倉庫鏈接起來

此時沒有報錯說明鏈接成功了，那麼咱們就繼續進行下一步

$git pull
$git add .
$git commit -m "init"
$git push origin master

git pull 是先把遠程倉庫的最新變更更新到你的本地工做區去，不然沒法提交本地工做區的更新代碼。

git add . 的意思是監控工做區的狀態樹，把工做時的全部變化提交到暫存區，包括文件內容修改(modified)以及新文件(new)，但不包括被刪除的文件。

使用git commit 的緣由是Git 每次提交代碼，都要寫 Commit message（提交說明），不然就不容許提交。上面代碼的-m參數，就是用來指定 commit mesage 的，上文例子中的Commit message爲「init」。

git push origin master的意思就是上傳本地當前分支代碼到master分支。git push則是上傳本地全部分支代碼到遠程對應的分支上。

 

 這樣你的遠程倉庫也會有你搭建好的angularjs前端項目框架啦，你就能夠跟你的小夥伴一塊兒愉快地合做啦（撒花）