Yeoman是由Paul Irish、Addy Osmani、Sindre Sorhus、Mickael Daniel、Eric Bidelman和Yeoman社區共同開發的一個項目。它旨在爲開發者提供一系列健壯的工具、程序庫和工做流,幫助他們快速構建出漂亮、引人注目的Web應用。前端
它不僅是一個工具,仍是一個工做流。它其實包括了三個部分yo、grunt、bower,分別用於項目的啓動、文件操做、包管理。node
Yo: Yo是一個項目初始化工具,能夠生成一套啓動某類項目必需的項目文件。web
Bower: 一個客戶端技術的軟件包管理器,它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。shell
GruntJS: GruntJS是基於JavaScript的命令行構建工具,它能夠幫助開發者們自動化重複性的工做。npm
如何安裝:windows
在你電腦的終端輸入:後端
curl -L get.yeoman.io | bash
這是終端就會打印出提示,告訴你如何安裝 yeomansass
看到的這個大鬍子人下面有一句提示讓你根據紫色命令安裝 yeomanruby
npm install -g yo grunt-cli bower
進過幾屏的安裝信息滾動,最後你會看到安裝成功提示(只列出一部分):bash
yo@1.1.2 /usr/local/lib/node_modules/yo ├── open@0.0.4 ├── chalk@0.4.0 (has-color@0.1.7, ansi-styles@1.0.0, strip-ansi@0.1.1) ├── async@0.2.10 ├── shelljs@0.2.6 ├── lodash@2.4.1 ├── nopt@2.1.2 (abbrev@1.0.4) ├── findup@0.1.5 (commander@2.1.0, colors@0.6.2) ├── sudo-block@0.3.0 (chalk@0.3.0) ├── update-notifier@0.1.8 (semver@2.1.0, request@2.27.0, configstore@0.2.3) ├── insight@0.3.1 (object-assign@0.1.2, lodash.debounce@2.4.1, request@2.27.0, inquirer@0.4.1, configstore@0.2.3) └── yeoman-generator@0.16.0 (dargs@0.1.0, debug@0.7.4, diff@1.0.8, class-extend@0.1.1, rimraf@2.2.6, findup-sync@0.1.3, text-table@0.2.0, mime@1.2.11, mkdirp@0.3.5, isbinaryfile@2.0.1, underscore.string@2.3.3, iconv-lite@0.2.11, glob@3.2.9, request@2.30.0, inquirer@0.4.1, file-utils@0.1.5, download@0.1.16, cheerio@0.13.1)
如何使用?
建立一個你的項目文件夾,好比我想練習 angular.js 我在code 目錄下建立了 angular 文件夾,終端下進入到這個文件夾後,運行命令 yo angular
第一步會出現這個提示,問你是否須要 Sass ,由於須要sass運行環境是 ruby(windows下會至關麻煩,能夠直接輸入 no 跳過)
第二步詢問你是否須要安裝 Bootstrap 框架? 須要就輸入 Yes
第三步詢問你是否要安裝上面提到的 angular 相關包,能夠用空格選擇或者取消選擇,回車開始執行.
最後進過幾屏提示信息的暫時會告訴你已經安裝成功.
這是你看下你項目目錄下又哪些文件
裏面這些內容就是這個工具幫你生成的.
yeoman 工具內置提供node.js的web服務器,同時會監聽工程目錄下的文件的改變,一旦文件發生改變會從新編譯文件,爲了讓後端給前端提供數據,咱們打算用 yeoman 來啓動一個web服務器.
如何啓動web服務器?
這時grunt 包終於要派上用場了,執行以下命令:
zhangzhi@moke:~/code/angular$ grunt server
啓動上面的服務器時會自動打開客戶端頁面.地址以下,生成的前端頁面效果是這樣的
若是你的 9000 端口不幸被佔,須要修改 yeoman 中的配置文件 gruntfile.js 便可
若是你想在包中引用其餘模塊怎麼辦?這是 bower 模塊現身了
bower install underscore grunt
bower 將在線拉取 underscore 的包內容.