30天web實踐3-yeoman

yeoman分三部分
yo 安裝generator 能夠安裝許多generator項目中使用某個
bower 管理各類包 升級 卸載 或者制定使用某個版本
grunt 就是編譯運行了 相似make
安裝依賴

Node.js v0.10.x+
npm (which comes bundled with Node) v1.4.3+
git


 npm install --global yo

這個命令就直接安裝了 yo bower gtunt

npm install --global generator-angular@0.9.2

$ mkdir mytodo && cd mytodo

$ yo

而後選擇 等它刷屏 這時候出錯 多半是網絡問題 你懂的
成功的話 你會發現mytodo下面有不少文件夾和文件 這些文件要本身建的話
這就是自動話啊 祈禱半分鐘

$ grunt serve

正常的話 它會打開你的瀏覽器 讓你看到一個頁面
可是若是你以前沒玩過ruby 你會失望的
安裝ruby gem

gem install compass

這時再grunt serve 前面都成功的話 就能看到久違的歡迎頁面了

half@half-All-Series:~/tmp/mytodo$ bower list
bower check-new     Checking for new versions of the project dependencies..
mytodo#0.0.0 /home/half/tmp/mytodo
├── angular#1.2.16 (latest is 1.3.0-rc.0)
├─┬ angular-animate#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16 (latest is 1.3.0-rc.0)
├─┬ angular-cookies#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-mocks#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-resource#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-route#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-sanitize#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-scenario#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├─┬ angular-touch#1.2.16 (latest is 1.3.0-rc.0)
│ └── angular#1.2.16
├── bootstrap-sass-official#3.1.1+2 (latest is 3.2.0+1)
├── es5-shim#3.1.1 (latest is 4.0.3)
├── jquery#1.11.1 (latest is 2.1.1)
└── json3#3.3.2

固然你也能夠安裝新的包

half@half-All-Series:~/tmp/mytodo$ bower search angular-ui-sortable
Search results:

angular-ui-sortable git://github.com/angular-ui/ui-sortable.git
angular-ui-sortable-multiselection git://github.com/thgreasi/ui-sortable-multiselection.git

搜索一下
下面安裝 記得加--save

half@half-All-Series:~/tmp/mytodo$ bower install --save angular-ui-sortable
bower not-cached    git://github.com/angular-ui/ui-sortable.git#*
bower resolve       git://github.com/angular-ui/ui-sortable.git#*
bower download      https://github.com/angular-ui/ui-sortable/archive/v0.12.10.tar.gz
bower extract       angular-ui-sortable#* archive.tar.gz
bower invalid-meta  angular-ui-sortable is missing "ignore" entry in bower.json
bower resolved      git://github.com/angular-ui/ui-sortable.git#0.12.10
bower not-cached    git://github.com/components/jqueryui.git#>=1.9
bower resolve       git://github.com/components/jqueryui.git#>=1.9
bower download      https://github.com/components/jqueryui/archive/1.11.1.tar.gz
bower extract       jquery-ui#>=1.9 archive.tar.gz
bower resolved      git://github.com/components/jqueryui.git#1.11.1
bower install       angular-ui-sortable#0.12.10
bower install       jquery-ui#1.11.1

angular-ui-sortable#0.12.10 bower_components/angular-ui-sortable
├── angular#1.2.16
└── jquery-ui#1.11.1

jquery-ui#1.11.1 bower_components/jquery-ui
└── jquery#1.11.1

後面還有單元測試什麼的 說實話 我不懂
我真的應該從頭學 整這些東西 更像玩具

順便說下harp
就是一個服務器程序 和apache同級別
他的特色是 Markdown, EJS, Jade, LESS, Sass, Stylus, and CoffeeScript這些類型的文件
你寫好放到文件夾 作好邏輯關係

harp server 文件夾名 --port 3000

端口能夠不制定 而後你訪問127.0.0.1：3000 harp把全部上面類型的文件解釋成對應html css javascript 呈現給你

固然這樣會比較慢 你也能夠直接

harp compile 文件夾名

這樣就編譯好了

總之使用harp 你就能夠盡情的使用jade markdown 。。。什麼 而不用考慮編譯問題