Yeoman是一種高效、開源的Web應用腳手架搭建系統，意在精簡開發過程。Yeoman因其專注於提供腳手架功能而聲譽鵲起，它支持使用各種不同的工具和接口協同優化項目的生成。
本文要點
- Yeoman提供了一種靈活創建、開發、編譯和調試Web應用的腳手架（scaffolding）軟件。
- 雖然Yeoman本身是JavaScript編寫的，但適用於任何語言編寫的應用。
- Yeoman支持與Webpack、Babel、TypeScript、React和Angular等多種第三方軟件庫的無縫集成。
- Yeoman內建立有一個基於Node.js的HTTP開發服務器，簡化了開發環境的設置和開發過程的迭代。
- Yeoman實現構建過程由開發環境到優化後生產環境間的無縫轉移。
Yeoman最初發佈於2012年，它是一款高效、開源的Web應用腳手架（scaffolding）軟件，意在精簡軟件的開發過程。腳手架軟件用於實現項目中多種不同的工具和接口的協同使用，優化項目的生成過程。Yeoman因其專注於提供腳手架功能而聲譽鵲起，項目開源發佈在GitHub上。
Yeoman的基礎知識
Yeoman的使用體驗可分爲三個層次，各層間無縫協作，均爲獨立開發，並可單獨運行。在第一層上，Yeoman提供了命令行實用表單程序“Yo”。Yo與Yeoman一起使用，提供Yeoman軟件平臺的基線。在第二層中，Yeoman包括了應用構建器“Grunt”和“Gulp”，幫助實現應用開發的自動化。Yeoman軟件第三層的特點在於使用了軟件包管理器“npm”，管理後端和前端開發的代碼包及其依賴關係，由此爲應用開發提供便利。Yeoman爲開發人員提供了多種結合開發過程使用的特性。
Yo
Yo擔當着“膠水”的作用，將應用粘合在一起的。Yo可在macOS、Windows和Linux等多種不同操作系統上使用。從設計上看，Yo通過Gruntfile與開發人員選取的生成器(generator）協同工作，創建Web應用的基線。通過使用Yo，可理解Yeoman的工作機制。
對比Grunt與Gulp
Grunt提供了開發的自動化，由此成爲Yeoman的重要創新組成部分。Grunt和Gulp插件的安裝和管理，均通過Node.js的軟件包管理器npm。作爲一種任務運行器，Grunt最大限度上簡化了開發人員的工作。Grunt構建系統可用於項目的構建、預覽和測試。一些重複性任務，包括編譯、縮減（ minification）、檢查（linting）和測試等，均可交由Grunt執行。Grunt將開發團隊從應用開發的瑣碎工作（nitty gritty）中解放出來，這意味着開發人員可以專注於應用所獨有的一些重要、複雜之處。尤其是，Grunt可以執行編譯、代碼檢查、單元測試和壓縮等基本任務，簡化了開發人員的工作。一些著名企業，包括沃爾瑪和Wordpress等，均已使用了Grunt。
Grunt還支持使用插件定製應用，其具有數以百計的可用插件，支持執行多種任務。例如，開發人員可使用cc-templates-generator插件基於組件生成模板，在需要併發運行Grunt任務時使用一些併發插件。但有必要指出，如果現有的插件並不能滿足開發人員的需求，那麼他們可以通過grunt-init在Grunt上創建自己的插件，然後發佈到數據庫中以供他人使用。所創建的內容和文件，取決於開發人員選取的具體模板。
Gulp非常類似於Grunt，也是一種開發人員構建應用的自動任務運行器。從設計上看，Gulp支持使用多種插件完成每個任務，而Grunt則是使用可同時完成多種任務的插件。此外，Gulp的性能也要顯著地快。例如，Grunt執行一次Sass編譯的用時2.348秒，而Gulp僅需要1.27秒。Gulp的性能優勢在於它使用了Node流，這意味着Gulp無需在磁盤上寫入中間文件。
開發團隊在Grunt或Gulp兩者間做出選擇時，應考慮的是應用的具體需求。
npm
npm是一種軟件包管理器，提供特性組和打包的代碼，支持開發人員簡化和自定義應用。通常，可用的代碼是通過由npm“託管”的代碼庫提供，其中包括jQuery，React和Angular等。從應用架構的角度看，開發人員可使用npm選取應用開發所需的代碼。npm的另一個特性類似於Grunt，如果npm平臺提供的代碼或軟件包無法滿足開發人員的需求，那麼他們可以創建自己的軟件包，並與他人共享。該做法適用於所有的開源軟件。
Yeoman的優點
- Yeoman的流程中整合了多種新手特性，支持新入門的開發人員輕鬆進行Web應用開發，同時也簡化了專業人員的工作。
- Yeoman可用於開發任何類型的Web應用。對於潛在的開發人員而言，它提供了極大的自由度。
- 該軟件非常人性化。即使是十分缺乏經驗的開發人員也可以使用，由此也成爲Web應用開發的一種絕佳選擇。
- 該軟件還提供了一些構建應用的自動化流程。對於無論具有何種經驗水平的各類開發人員而言，精簡複雜的開發過程無疑都是一件好事。
- 在提供腳手架功能外，Yeoman還爲Web應用開發的其它部分提供了工具。例如，調試所用的代碼。開發人員可以使用Chrome Devtools，或者任何使得順手的IDE。Yeoman生成器還提供調試模式，可記錄相關日誌。這意味着Yeoman可以滿足開發人員的各種需求，不必使用大量的軟件平臺即可創建完美的應用。
- Yeoman支持使用任何編程語言創建應用，包括Java和C＃。對於希望或需要實現應用開發多樣化的開發人員，該多語言軟件提供的多功能性是非常有用的。
- Yeoman集成了多種生成器。這些生成器作爲Yeoman開發過程的“插件”，爲Yeoman用戶提供了多種選項。在搭建腳手架中，支持使用不同的生成器。例如，開發人員可通過使用各種生成器間的協調和協作來“支撐”自身的項目。在項目定製和開發之前，開發人員還可以考慮將生成器作爲項目的準系統。一些熱門的生成器包括：
- Backbone.js：提供Web應用處理數據、視圖、事件、REST API等的結構和公共基礎。
- AngularJS：廣爲使用且十分流行的JavaScript框架，可提供模型支撐、視圖路由等功能。該生成器中還包括了sun-generator，實現控制器、指令、服務、提供者（provider），裝飾器（decorator）等其他功能。
- Bootstrap生成器：一種流行的CSS框架，通過提供超高效實現簡化項目開發。它爲Bootstrap項目提供四種起始選項：CSS、LESS、SASS和Stylus。生成器根據開發人員的選擇，將所選框架下載到項目的bower組件中。
- JHipster生成器：用於開發和部署Spring Boot和Angular/React Web應用。
- Hyperledger-composer：使用Hyperledger Composer業務網絡定義作爲輸入，創建和編寫新應用程序相關的工件。
- Yeoman是開源的。 這意味着用戶可從軟件開發的自由市場中受益。一旦需要彙集英才創建最佳、最優化的系統，用戶就能夠受益於這些最優秀的開發人員。
Yeoman的不足之處
- Yeoman支持使用任何編程語言併爲業餘開發者提供服務，這意味着對於那些經驗豐富的開發人員而言，他們希望的是在提供高級開發選項的同時儘可能地簡化和定製流程，由此Yeoman可能並非最佳的系統。在他們看來，Yeoman的平臺可能過於通用。
- 與上一點相關，一些開發人員可能會發現，由於Yeoman的生成器設置，他們花費了過多時間在定製和測試生成器上，而不是工作於實際的應用開發。
- Yeoman另一個飽受批評之處是需要開發人員緊跟發展。對於開發人員而言，重要的是確保他們不斷擁有最新的程序、生成器及其它工具，以生產最好的產品。因此，項目或應用是永遠不會真正完成的，最佳實踐也是不斷變化的。爲了保持競爭力，開發人員必須亦步亦趨。
Yeoman具有清晰的API，這對於那些剛着手或想要嘗試構建應用的用戶是一個很好的特性。 此外，Yeoman還可自動執行一些常見的任務，有助於開發人員改進工作流程。
儘管Yeoman尚存在一些缺陷，但其背後具有一個不斷增長的社區，並且開發人員也正在其工作流程集成Yeoman，實現持續集成、版本控制等，從而使構建應用對每位開發人員而言不再那麼令人生畏和耗時。Yeoman還支持多種選擇，例如Grunt、Gulp和npm，確保開發人員所具有的軟件組合最符合團隊對Web應用程序開發過程的期望。
爲進一步瞭解Yeoman的相關信息，下面我們將通過給出一個如何使用Yeoman創建示例應用，介紹構建的過程。該特定示例是TodoMVC的一個實現。
第一步：設置開發環境
開發人員主要通過命令行與Yeoman進行交互。
在安裝Fountain Webapp Generator之前，確保系統中安裝了下列環境：
- Node.js 6或以上版本；
- npm 3或以上版本；
- Git；
- Yeoman工具集。
如果出現訪問許可或權限問題，可參考操作指南。
第二步：安裝Yeoman生成器
安裝用於FountainJS項目的生成器，可減少用於設置樣板文件（boilerplate）代碼和文件夾結構的時間。使用npm安裝generator-fountain-webapp，命令爲npm install --global generator-fountain-webapp。
此外，還可使用Yeoman的交互菜單搜索其它生成器。運行yo命令，選擇“install a generator”選項，然後繼續搜索其它已發佈的生成器。
第三步：使用生成器搭建應用的腳手架
該步驟展示Yeoman如何生成開發人員選定的軟件庫和框架。此外，還有選項支持使用一些外部軟件庫，例如Webpack、Babel和Sass。
首先，創建項目文件夾。運行命令mkdir mytodo和cd mytodo，爲項目創建mytodo文件夾。生成器將使用此文件夾放置生成的項目腳手架文件。
現在，運行yo，並通過Yeoman菜單訪問生成器。開發人員可能已安裝了多個生成器，對於此例需選定Fountain Webapp並點擊回車鍵。
一些生成器提供了額外的功能，使用開發人員軟件庫定製應用。着手配置生成器，加速開發環境的設置。
下面列出使用的一些FountainJS生成器選項：
- 模塊管理，例如Webpack、SystemJS；
- 框架，例如React、Angular2或Angular1；
- CSS預處理器，例如SASS、LESS；
- JavaScript預處理器，例如Babel、TypeScript；
- 三個示例應用，即引導頁（a landing page）、示例程序hello world和TodoMVC。
對於本例，箭頭選擇SaSS、React、Babel、Webpack和Redux TodoMVC並回車。Yeoman會自動爲應用建立腳手架，並管理依賴關係。
第四步：檢查Yeoman生成的應用目錄結構
查看mytodo目錄中腳手架生成的內容。其中可看到：
- src
- app
- index.html
- index.js
- conf
- gulp_tasks
- gulpfile.js
- .babelrc
- package.json
- node_modules
- .gitattributes
- .gitignore
在所有生成和安裝完成後，會初始化一個新的git代碼庫。使用git add --all和git commit -m 'First commit’命令添加首個提交，保存當前狀態。
第五步：在瀏覽器中預覽應用
運行npm腳本，創建一個基於Node的本地HTTP服務器，命令爲npm run serve。該服務器將在localhost:3000端口（在一些配置下是127.0.0.1:3000）提供服務。以localhost:3000打開一個新的瀏覽器頁面。
（注意：要停止服務器運行並退出CLI過程，使用Ctrl+C鍵盤命令。）
打開常用的文本編輯器查看文件，並可做出更改。在每次保存編輯後，瀏覽器將強制自動刷新，該功能稱爲“現場重載”（live reloading）。要實現該功能，需要在gulpfile.js中配置Gulp任務，在gulp_tasks/browsersync.js中配置Browsersync。
第六步：使用Karma和Jasmine測試
Karma是一種測試框架不可知性的JavaScript測試運行器。Jasmine測試框架已經包含在本例中所使用的FountainJS生成器中。前面運行的yo fountain-webapp，在mytodo目錄中生成了模式爲*.spec.js的腳手架文件，並創建了conf/karma.conf/js文件。這爲Karma提供了Node模塊。
回到命令行，使用Ctrl+C殺掉本地服務器。使用package.json中的腳手架npm腳本運行單元測試。運行npm test初始化測試。
在src目錄中打開src/app/reducers/todos.spec.js，可看到腳手架的單元測試。
第七步：準備用於生產環境
首先，通過優化用於生產的文件，創建應用的生產版本。運行npm run build，精簡下列過程：
- 代碼檢查；
- 腳本和風格的鏈接和最小化；
- 編譯預處理器的輸出；
- 儘可能精簡應用。
運行npm run build腳本後，通過mytodo項目根目錄中的dist文件夾可訪問用於生產的應用。這些文件已使用開發人員熟悉的部署服務置於服務器。
最後，運行npm run serve:dist，在本地預覽生成的應用。該命令在本地Web服務器上構建並加載項目。
作者簡介
Oscar Salas是一位具有五年經驗的B2B數字化市場專家，他幫助企業藉助品牌策略發展和營銷過程實現成長和擴張。Salas是一位分析型思考者，愛貓人士，他喜歡彈鋼琴，聽齊柏林飛艇樂隊。他目前牽頭iTexico的Demand Gen戰略。
查看英文原文： Building a Web App With Yeoman