Yoman的安裝和使用

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 的包內容.

相關文章
相關標籤/搜索