Yeoman 是一種高效、開(kāi)源的 Web 應(yīng)用腳手架搭建系統(tǒng)眼坏，意在精簡(jiǎn)開(kāi)發(fā)過(guò)程嚷掠。Yeoman 因其專(zhuān)注于提供腳手架功能而聲譽(yù)鵲起，它支持使用各種不同的工具和接口協(xié)同優(yōu)化項(xiàng)目的生成首量。
本文要點(diǎn)
- Yeoman 提供了一種靈活創(chuàng)建壮吩、開(kāi)發(fā)进苍、編譯和調(diào)試 Web 應(yīng)用的腳手架（scaffolding）軟件。
- 雖然 Yeoman 本身是 JavaScript 編寫(xiě)的鸭叙，但適用于任何語(yǔ)言編寫(xiě)的應(yīng)用觉啊。
- Yeoman 支持與 Webpack、Babel沈贝、TypeScript杠人、React 和 Angular 等多種第三方軟件庫(kù)的無(wú)縫集成。
- Yeoman 內(nèi)建立有一個(gè)基于 Node.js 的 HTTP 開(kāi)發(fā)服務(wù)器宋下，簡(jiǎn)化了開(kāi)發(fā)環(huán)境的設(shè)置和開(kāi)發(fā)過(guò)程的迭代嗡善。
- Yeoman 實(shí)現(xiàn)構(gòu)建過(guò)程由開(kāi)發(fā)環(huán)境到優(yōu)化后生產(chǎn)環(huán)境間的無(wú)縫轉(zhuǎn)移。
Yeoman最初發(fā)布于 2012 年学歧，它是一款高效罩引、開(kāi)源的 Web 應(yīng)用腳手架（scaffolding）軟件，意在精簡(jiǎn)軟件的開(kāi)發(fā)過(guò)程枝笨。腳手架軟件用于實(shí)現(xiàn)項(xiàng)目中多種不同的工具和接口的協(xié)同使用袁铐，優(yōu)化項(xiàng)目的生成過(guò)程。Yeoman 因其專(zhuān)注于提供腳手架功能而聲譽(yù)鵲起横浑，項(xiàng)目開(kāi)源發(fā)布在GitHub上剔桨。
Yeoman 的基礎(chǔ)知識(shí)
Yeoman 的使用體驗(yàn)可分為三個(gè)層次，各層間無(wú)縫協(xié)作伪嫁，均為獨(dú)立開(kāi)發(fā)领炫，并可單獨(dú)運(yùn)行。在第一層上张咳，Yeoman 提供了命令行實(shí)用表單程序“Yo”帝洪。Yo 與 Yeoman 一起使用，提供 Yeoman 軟件平臺(tái)的基線(xiàn)脚猾。在第二層中葱峡，Yeoman 包括了應(yīng)用構(gòu)建器“Grunt”和“Gulp”，幫助實(shí)現(xiàn)應(yīng)用開(kāi)發(fā)的自動(dòng)化龙助。Yeoman 軟件第三層的特點(diǎn)在于使用了軟件包管理器“npm”砰奕，管理后端和前端開(kāi)發(fā)的代碼包及其依賴(lài)關(guān)系，由此為應(yīng)用開(kāi)發(fā)提供便利提鸟。Yeoman 為開(kāi)發(fā)人員提供了多種結(jié)合開(kāi)發(fā)過(guò)程使用的特性军援。
Yo
Yo 擔(dān)當(dāng)著“膠水”的作用，將應(yīng)用粘合在一起的称勋。Yo 可在 macOS胸哥、Windows 和 Linux 等多種不同操作系統(tǒng)上使用。從設(shè)計(jì)上看赡鲜，Yo 通過(guò) Gruntfile 與開(kāi)發(fā)人員選取的生成器 (generator）協(xié)同工作空厌，創(chuàng)建 Web 應(yīng)用的基線(xiàn)庐船。通過(guò)使用 Yo，可理解 Yeoman 的工作機(jī)制嘲更。
對(duì)比 Grunt 與 Gulp
Grunt 提供了開(kāi)發(fā)的自動(dòng)化筐钟，由此成為 Yeoman 的重要?jiǎng)?chuàng)新組成部分。Grunt 和 Gulp 插件的安裝和管理赋朦，均通過(guò) Node.js 的軟件包管理器 npm篓冲。作為一種任務(wù)運(yùn)行器，Grunt 最大限度上簡(jiǎn)化了開(kāi)發(fā)人員的工作北发。Grunt 構(gòu)建系統(tǒng)可用于項(xiàng)目的構(gòu)建纹因、預(yù)覽和測(cè)試喷屋。一些重復(fù)性任務(wù)琳拨，包括編譯、縮減（ minification）屯曹、檢查（linting）和測(cè)試等狱庇，均可交由 Grunt 執(zhí)行。Grunt 將開(kāi)發(fā)團(tuán)隊(duì)從應(yīng)用開(kāi)發(fā)的瑣碎工作（nitty gritty）中解放出來(lái)恶耽，這意味著開(kāi)發(fā)人員可以專(zhuān)注于應(yīng)用所獨(dú)有的一些重要密任、復(fù)雜之處。尤其是偷俭，Grunt 可以執(zhí)行編譯浪讳、代碼檢查、單元測(cè)試和壓縮等基本任務(wù)涌萤，簡(jiǎn)化了開(kāi)發(fā)人員的工作淹遵。一些著名企業(yè)，包括沃爾瑪和 Wordpress等负溪，均已使用了 Grunt透揣。
Grunt 還支持使用插件定制應(yīng)用，其具有數(shù)以百計(jì)的可用插件川抡，支持執(zhí)行多種任務(wù)辐真。例如，開(kāi)發(fā)人員可使用 cc-templates-generator 插件基于組件生成模板崖堤，在需要并發(fā)運(yùn)行 Grunt 任務(wù)時(shí)使用一些并發(fā)插件侍咱。但有必要指出，如果現(xiàn)有的插件并不能滿(mǎn)足開(kāi)發(fā)人員的需求密幔，那么他們可以通過(guò)grunt-init在 Grunt 上創(chuàng)建自己的插件楔脯，然后發(fā)布到數(shù)據(jù)庫(kù)中以供他人使用。所創(chuàng)建的內(nèi)容和文件老玛，取決于開(kāi)發(fā)人員選取的具體模板淤年。
Gulp 非常類(lèi)似于 Grunt钧敞，也是一種開(kāi)發(fā)人員構(gòu)建應(yīng)用的自動(dòng)任務(wù)運(yùn)行器。從設(shè)計(jì)上看麸粮，Gulp 支持使用多種插件完成每個(gè)任務(wù)溉苛，而 Grunt 則是使用可同時(shí)完成多種任務(wù)的插件。此外弄诲，Gulp 的性能也要顯著地快愚战。例如，Grunt 執(zhí)行一次 Sass 編譯的用時(shí) 2.348 秒齐遵，而 Gulp 僅需要 1.27 秒寂玲。Gulp 的性能優(yōu)勢(shì)在于它使用了 Node 流，這意味著 Gulp 無(wú)需在磁盤(pán)上寫(xiě)入中間文件梗摇。
開(kāi)發(fā)團(tuán)隊(duì)在 Grunt 或 Gulp 兩者間做出選擇時(shí)拓哟，應(yīng)考慮的是應(yīng)用的具體需求。
npm
npm 是一種軟件包管理器伶授，提供特性組和打包的代碼断序，支持開(kāi)發(fā)人員簡(jiǎn)化和自定義應(yīng)用。通常糜烹，可用的代碼是通過(guò)由 npm“托管”的代碼庫(kù)提供违诗，其中包括 jQuery，React 和 Angular 等疮蹦。從應(yīng)用架構(gòu)的角度看诸迟，開(kāi)發(fā)人員可使用 npm 選取應(yīng)用開(kāi)發(fā)所需的代碼。npm 的另一個(gè)特性類(lèi)似于 Grunt愕乎，如果 npm 平臺(tái)提供的代碼或軟件包無(wú)法滿(mǎn)足開(kāi)發(fā)人員的需求阵苇，那么他們可以創(chuàng)建自己的軟件包，并與他人共享妆毕。該做法適用于所有的開(kāi)源軟件慎玖。
Yeoman 的優(yōu)點(diǎn)
- Yeoman 的流程中整合了多種新手特性，支持新入門(mén)的開(kāi)發(fā)人員輕松進(jìn)行 Web 應(yīng)用開(kāi)發(fā)笛粘，同時(shí)也簡(jiǎn)化了專(zhuān)業(yè)人員的工作趁怔。
- Yeoman 可用于開(kāi)發(fā)任何類(lèi)型的 Web 應(yīng)用。對(duì)于潛在的開(kāi)發(fā)人員而言薪前，它提供了極大的自由度润努。
- 該軟件非常人性化。即使是十分缺乏經(jīng)驗(yàn)的開(kāi)發(fā)人員也可以使用示括，由此也成為 Web 應(yīng)用開(kāi)發(fā)的一種絕佳選擇铺浇。
- 該軟件還提供了一些構(gòu)建應(yīng)用的自動(dòng)化流程。對(duì)于無(wú)論具有何種經(jīng)驗(yàn)水平的各類(lèi)開(kāi)發(fā)人員而言垛膝，精簡(jiǎn)復(fù)雜的開(kāi)發(fā)過(guò)程無(wú)疑都是一件好事鳍侣。
- 在提供腳手架功能外丁稀，Yeoman 還為 Web 應(yīng)用開(kāi)發(fā)的其它部分提供了工具。例如倚聚，調(diào)試所用的代碼线衫。開(kāi)發(fā)人員可以使用 Chrome Devtools，或者任何使得順手的 IDE惑折。Yeoman 生成器還提供調(diào)試模式授账，可記錄相關(guān)日志。這意味著 Yeoman 可以滿(mǎn)足開(kāi)發(fā)人員的各種需求惨驶，不必使用大量的軟件平臺(tái)即可創(chuàng)建完美的應(yīng)用白热。
- Yeoman 支持使用任何編程語(yǔ)言創(chuàng)建應(yīng)用，包括 Java 和 C＃粗卜。對(duì)于希望或需要實(shí)現(xiàn)應(yīng)用開(kāi)發(fā)多樣化的開(kāi)發(fā)人員屋确，該多語(yǔ)言軟件提供的多功能性是非常有用的。
- Yeoman 集成了多種生成器休建。這些生成器作為 Yeoman 開(kāi)發(fā)過(guò)程的“插件”乍恐，為 Yeoman 用戶(hù)提供了多種選項(xiàng)。在搭建腳手架中测砂，支持使用不同的生成器。例如百匆，開(kāi)發(fā)人員可通過(guò)使用各種生成器間的協(xié)調(diào)和協(xié)作來(lái)“支撐”自身的項(xiàng)目砌些。在項(xiàng)目定制和開(kāi)發(fā)之前，開(kāi)發(fā)人員還可以考慮將生成器作為項(xiàng)目的準(zhǔn)系統(tǒng)加匈。一些熱門(mén)的生成器包括：
- Backbone.js：提供 Web 應(yīng)用處理數(shù)據(jù)存璃、視圖、事件雕拼、REST API 等的結(jié)構(gòu)和公共基礎(chǔ)纵东。
- AngularJS：廣為使用且十分流行的 JavaScript 框架，可提供模型支撐啥寇、視圖路由等功能偎球。該生成器中還包括了 sun-generator，實(shí)現(xiàn)控制器辑甜、指令衰絮、服務(wù)、提供者（provider）磷醋，裝飾器（decorator）等其他功能猫牡。
- Bootstrap 生成器：一種流行的 CSS 框架，通過(guò)提供超高效實(shí)現(xiàn)簡(jiǎn)化項(xiàng)目開(kāi)發(fā)邓线。它為 Bootstrap 項(xiàng)目提供四種起始選項(xiàng)：CSS淌友、LESS煌恢、SASS 和 Stylus。生成器根據(jù)開(kāi)發(fā)人員的選擇震庭，將所選框架下載到項(xiàng)目的 bower 組件中症虑。
- JHipster 生成器：用于開(kāi)發(fā)和部署 Spring Boot 和 Angular/React Web 應(yīng)用。
- Hyperledger-composer：使用 Hyperledger Composer 業(yè)務(wù)網(wǎng)絡(luò)定義作為輸入归薛，創(chuàng)建和編寫(xiě)新應(yīng)用程序相關(guān)的工件谍憔。
- Yeoman 是開(kāi)源的。 這意味著用戶(hù)可從軟件開(kāi)發(fā)的自由市場(chǎng)中受益主籍。一旦需要匯集英才創(chuàng)建最佳习贫、最優(yōu)化的系統(tǒng)，用戶(hù)就能夠受益于這些最優(yōu)秀的開(kāi)發(fā)人員千元。
Yeoman 的不足之處
- Yeoman 支持使用任何編程語(yǔ)言并為業(yè)余開(kāi)發(fā)者提供服務(wù)苫昌，這意味著對(duì)于那些經(jīng)驗(yàn)豐富的開(kāi)發(fā)人員而言，他們希望的是在提供高級(jí)開(kāi)發(fā)選項(xiàng)的同時(shí)盡可能地簡(jiǎn)化和定制流程幸海，由此 Yeoman 可能并非最佳的系統(tǒng)祟身。在他們看來(lái)，Yeoman 的平臺(tái)可能過(guò)于通用物独。
- 與上一點(diǎn)相關(guān)袜硫，一些開(kāi)發(fā)人員可能會(huì)發(fā)現(xiàn)，由于 Yeoman 的生成器設(shè)置挡篓，他們花費(fèi)了過(guò)多時(shí)間在定制和測(cè)試生成器上婉陷，而不是工作于實(shí)際的應(yīng)用開(kāi)發(fā)。
- Yeoman 另一個(gè)飽受批評(píng)之處是需要開(kāi)發(fā)人員緊跟發(fā)展官研。對(duì)于開(kāi)發(fā)人員而言秽澳，重要的是確保他們不斷擁有最新的程序、生成器及其它工具戏羽，以生產(chǎn)最好的產(chǎn)品担神。因此，項(xiàng)目或應(yīng)用是永遠(yuǎn)不會(huì)真正完成的始花，最佳實(shí)踐也是不斷變化的妄讯。為了保持競(jìng)爭(zhēng)力，開(kāi)發(fā)人員必須亦步亦趨衙荐。
Yeoman 具有清晰的 API捞挥，這對(duì)于那些剛著手或想要嘗試構(gòu)建應(yīng)用的用戶(hù)是一個(gè)很好的特性。 此外忧吟，Yeoman 還可自動(dòng)執(zhí)行一些常見(jiàn)的任務(wù)砌函，有助于開(kāi)發(fā)人員改進(jìn)工作流程。
盡管 Yeoman 尚存在一些缺陷，但其背后具有一個(gè)不斷增長(zhǎng)的社區(qū)讹俊，并且開(kāi)發(fā)人員也正在其工作流程集成 Yeoman垦沉，實(shí)現(xiàn)持續(xù)集成、版本控制等仍劈，從而使構(gòu)建應(yīng)用對(duì)每位開(kāi)發(fā)人員而言不再那么令人生畏和耗時(shí)厕倍。Yeoman 還支持多種選擇，例如 Grunt贩疙、Gulp 和 npm讹弯，確保開(kāi)發(fā)人員所具有的軟件組合最符合團(tuán)隊(duì)對(duì) Web 應(yīng)用程序開(kāi)發(fā)過(guò)程的期望。
為進(jìn)一步了解 Yeoman 的相關(guān)信息这溅，下面我們將通過(guò)給出一個(gè)如何使用 Yeoman 創(chuàng)建示例應(yīng)用组民，介紹構(gòu)建的過(guò)程。該特定示例是 TodoMVC 的一個(gè)實(shí)現(xiàn)悲靴。
第一步：設(shè)置開(kāi)發(fā)環(huán)境
開(kāi)發(fā)人員主要通過(guò)命令行與 Yeoman 進(jìn)行交互臭胜。
在安裝 Fountain Webapp Generator 之前，確保系統(tǒng)中安裝了下列環(huán)境：
- Node.js 6 或以上版本癞尚；
- npm 3 或以上版本耸三；
- Git；
- Yeoman 工具集浇揩。
如果出現(xiàn)訪(fǎng)問(wèn)許可或權(quán)限問(wèn)題仪壮，可參考操作指南。
第二步：安裝 Yeoman 生成器
安裝用于 FountainJS 項(xiàng)目的生成器临燃，可減少用于設(shè)置樣板文件（boilerplate）代碼和文件夾結(jié)構(gòu)的時(shí)間睛驳。使用 npm 安裝 generator-fountain-webapp，命令為 npm install --global generator-fountain-webapp膜廊。
此外，還可使用 Yeoman 的交互菜單搜索其它生成器淫茵。運(yùn)行 yo 命令爪瓜，選擇“install a generator”選項(xiàng)，然后繼續(xù)搜索其它已發(fā)布的生成器匙瘪。
第三步：使用生成器搭建應(yīng)用的腳手架
該步驟展示 Yeoman 如何生成開(kāi)發(fā)人員選定的軟件庫(kù)和框架铆铆。此外，還有選項(xiàng)支持使用一些外部軟件庫(kù)丹喻，例如Webpack薄货、Babel和Sass。
首先碍论，創(chuàng)建項(xiàng)目文件夾谅猾。運(yùn)行命令 mkdir mytodo 和 cd mytodo，為項(xiàng)目創(chuàng)建 mytodo 文件夾。生成器將使用此文件夾放置生成的項(xiàng)目腳手架文件税娜。
現(xiàn)在坐搔，運(yùn)行 yo，并通過(guò) Yeoman 菜單訪(fǎng)問(wèn)生成器敬矩。開(kāi)發(fā)人員可能已安裝了多個(gè)生成器概行，對(duì)于此例需選定Fountain Webapp并點(diǎn)擊回車(chē)鍵。
一些生成器提供了額外的功能弧岳，使用開(kāi)發(fā)人員軟件庫(kù)定制應(yīng)用凳忙。著手配置生成器，加速開(kāi)發(fā)環(huán)境的設(shè)置禽炬。
下面列出使用的一些 FountainJS 生成器選項(xiàng)：
- 模塊管理涧卵，例如Webpack、SystemJS瞎抛；
- 框架艺演，例如React、Angular2或Angular1桐臊；
- CSS 預(yù)處理器胎撤，例如SASS、LESS断凶；
- JavaScript 預(yù)處理器伤提，例如Babel、TypeScript认烁；
- 三個(gè)示例應(yīng)用肿男，即引導(dǎo)頁(yè)（a landing page）、示例程序 hello world 和 TodoMVC却嗡。
對(duì)于本例舶沛，箭頭選擇SaSS、React窗价、Babel如庭、Webpack和Redux TodoMVC并回車(chē)。Yeoman 會(huì)自動(dòng)為應(yīng)用建立腳手架撼港，并管理依賴(lài)關(guān)系坪它。
第四步：檢查 Yeoman 生成的應(yīng)用目錄結(jié)構(gòu)
查看 mytodo 目錄中腳手架生成的內(nèi)容。其中可看到：
- src
- app
- index.html
- index.js
- conf
- gulp_tasks
- gulpfile.js
- .babelrc
- package.json
- node_modules
- .gitattributes
- .gitignore
在所有生成和安裝完成后帝牡，會(huì)初始化一個(gè)新的 git 代碼庫(kù)往毡。使用 git add --all 和 git commit -m 'First commit’命令添加首個(gè)提交，保存當(dāng)前狀態(tài)靶溜。
第五步：在瀏覽器中預(yù)覽應(yīng)用
運(yùn)行 npm 腳本开瞭，創(chuàng)建一個(gè)基于 Node 的本地 HTTP 服務(wù)器懒震，命令為 npm run serve。該服務(wù)器將在 localhost:3000 端口（在一些配置下是 127.0.0.1:3000）提供服務(wù)惩阶。以 localhost:3000 打開(kāi)一個(gè)新的瀏覽器頁(yè)面挎狸。
（注意：要停止服務(wù)器運(yùn)行并退出 CLI 過(guò)程，使用 Ctrl+C 鍵盤(pán)命令断楷。）
打開(kāi)常用的文本編輯器查看文件锨匆，并可做出更改。在每次保存編輯后冬筒，瀏覽器將強(qiáng)制自動(dòng)刷新恐锣，該功能稱(chēng)為“現(xiàn)場(chǎng)重載”（live reloading）。要實(shí)現(xiàn)該功能舞痰，需要在 gulpfile.js 中配置 Gulp 任務(wù)土榴，在 gulp_tasks/browsersync.js 中配置Browsersync。
第六步：使用 Karma 和 Jasmine 測(cè)試
Karma是一種測(cè)試框架不可知性的 JavaScript 測(cè)試運(yùn)行器响牛。Jasmine測(cè)試框架已經(jīng)包含在本例中所使用的 FountainJS 生成器中玷禽。前面運(yùn)行的 yo fountain-webapp，在 mytodo 目錄中生成了模式為 *.spec.js 的腳手架文件呀打，并創(chuàng)建了 conf/karma.conf/js 文件矢赁。這為 Karma 提供了 Node 模塊。
回到命令行贬丛，使用 Ctrl+C 殺掉本地服務(wù)器撩银。使用 package.json 中的腳手架 npm 腳本運(yùn)行單元測(cè)試。運(yùn)行 npm test 初始化測(cè)試豺憔。
在 src 目錄中打開(kāi) src/app/reducers/todos.spec.js额获，可看到腳手架的單元測(cè)試。
第七步：準(zhǔn)備用于生產(chǎn)環(huán)境
首先恭应，通過(guò)優(yōu)化用于生產(chǎn)的文件抄邀，創(chuàng)建應(yīng)用的生產(chǎn)版本。運(yùn)行 npm run build昼榛，精簡(jiǎn)下列過(guò)程：
- 代碼檢查撤摸；
- 腳本和風(fēng)格的鏈接和最小化；
- 編譯預(yù)處理器的輸出褒纲；
- 盡可能精簡(jiǎn)應(yīng)用。
運(yùn)行 npm run build 腳本后钥飞，通過(guò) mytodo 項(xiàng)目根目錄中的 dist 文件夾可訪(fǎng)問(wèn)用于生產(chǎn)的應(yīng)用莺掠。這些文件已使用開(kāi)發(fā)人員熟悉的部署服務(wù)置于服務(wù)器。
最后读宙，運(yùn)行 npm run serve:dist彻秆，在本地預(yù)覽生成的應(yīng)用。該命令在本地 Web 服務(wù)器上構(gòu)建并加載項(xiàng)目。
獲取更多Java高級(jí)架構(gòu)最新視頻唇兑，
直接點(diǎn)擊鏈接加群酒朵。https://jq.qq.com/?_wv=1027&k=5lXBNZ7
