Yeoman介紹
Yeoman是一套workflow的工具而且是open source, 他整合了Grunt跟Bower來開發WebApps,他也提供了基本的開發環境的架構。
Grunt是一套由node.js所開發出來的task runner,你可以建立自己的任務流程,來簡化你的工作。他內建了livereload, minification, compilation, unit testing, linting來讓比較繁雜的工作來自動化。
Bower是front-end package management用來管理跟安裝Web 開發要的套件,他會幫你下載跟管理你的每個專案要的套件。
開始安裝以上三套軟體:
接著yo會出現詢問要裝的軟體那就看你的需求來決定了,我預設是全部都按Yes。接下來就是要安裝node.js跟前端所需要的套件。輸入以下的command
$> npm install && bower install
這樣整個WebApp開發的環境就完成了,安裝時間也很短,省下了自己整合Grunt跟Brower得時間。
開始測試你的WebApp,輸入grunt所建立的task command "server"開啟一個簡單的web server來協助你開發。
$> grunt server
如果開發你開發完成後要釋出的版本的話,輸入grunt他會幫你作unit testing,javascript的jshint跟css,html還有javascript的minification。當然unit testing要你自己來寫。其他grunt會幫你處理完。
$> grunt
以上是Yeoman簡單的介紹,之後我會在寫Yeoman所產生的架構來說明,以及如何改Grunt的設定檔來符合你自己開發的流程。
如果有寫的不清楚或是寫錯歡迎留言跟我說,謝謝。
Grunt是一套由node.js所開發出來的task runner,你可以建立自己的任務流程,來簡化你的工作。他內建了livereload, minification, compilation, unit testing, linting來讓比較繁雜的工作來自動化。
Bower是front-end package management用來管理跟安裝Web 開發要的套件,他會幫你下載跟管理你的每個專案要的套件。
開始安裝以上三套軟體:
- 首先安裝node.js
- 然後在command line輸入npm install -g yo grunt-cli bower
如果以上的安裝有問題或有不太了解歡迎留言。
使用方法:
打開你的Terminal輸入以下的command來讓yeoman來產生webApp專案的基本架構。
$> yo webapp
接著yo會出現詢問要裝的軟體那就看你的需求來決定了,我預設是全部都按Yes。接下來就是要安裝node.js跟前端所需要的套件。輸入以下的command
$> npm install && bower install
這樣整個WebApp開發的環境就完成了,安裝時間也很短,省下了自己整合Grunt跟Brower得時間。
開始測試你的WebApp,輸入grunt所建立的task command "server"開啟一個簡單的web server來協助你開發。
$> grunt server
如果開發你開發完成後要釋出的版本的話,輸入grunt他會幫你作unit testing,javascript的jshint跟css,html還有javascript的minification。當然unit testing要你自己來寫。其他grunt會幫你處理完。
$> grunt
以上是Yeoman簡單的介紹,之後我會在寫Yeoman所產生的架構來說明,以及如何改Grunt的設定檔來符合你自己開發的流程。
如果有寫的不清楚或是寫錯歡迎留言跟我說,謝謝。
留言