Yeoman 是一种高效, 开源的 web 应用脚手架搭建系统, 意在精简开发过程. Yeoman 因其专注于提供脚手架功能而声誉鹊起, 它支持使用各种不同的工具和接口协同优化项目的生成.
本文要点
Yeoman 提供了一种灵活创建, 开发, 编译和调试 Web 应用的脚手架 (scaffolding) 软件.
虽然 Yeoman 本身是 JavaScript 编写的, 但适用于任何语言编写的应用.
Yeoman 支持与 Webpack,Babel,TypeScript,React 和 Angular 等多种第三方软件库的无缝集成.
Yeoman 内建立有一个基于 Node.JS 的 HTTP 开发服务器, 简化了开发环境的设置和开发过程的迭代.
Yeoman 实现构建过程由开发环境到优化后生产环境间的无缝转移.
Yeoman http://yeoman.io/ 最初发布于 2012 年, 它是一款高效, 开源的 Web 应用脚手架 (scaffolding) 软件, 意在精简软件的开发过程. 脚手架软件用于实现项目中多种不同的工具和接口的协同使用, 优化项目的生成过程. Yeoman 因其专注于提供脚手架功能而声誉鹊起, 项目开源发布在 GitHub https://github.com/yeoman/yeoman 上.
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 https://gruntjs.com/who-uses-grunt 等, 均已使用了 Grunt.
Grunt 还支持使用插件定制应用, 其具有数以百计的 可用插件 https://gruntjs.com/plugins , 支持执行多种任务. 例如, 开发人员可使用 cc-templates-generator 插件基于组件生成模板, 在需要并发运行 Grunt 任务时使用一些并发插件. 但有必要指出, 如果现有的插件并不能满足开发人员的需求, 那么他们可以通过 grunt-init https://gruntjs.com/project-scaffolding 在 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 https://webpack.js.org/ , Babel https://babeljs.io/ 和 Sass https://sass-lang.com/ .
首先, 创建项目文件夹. 运行命令 mkdir mytodo 和 cd mytodo, 为项目创建 mytodo 文件夹. 生成器将使用此文件夹放置生成的项目脚手架文件.
现在, 运行 yo, 并通过 Yeoman 菜单访问生成器. 开发人员可能已安装了多个生成器, 对于此例需选定 Fountain Webapp 并点击回车键.
一些生成器提供了额外的功能, 使用开发人员软件库定制应用. 着手配置生成器, 加速开发环境的设置.
下面列出使用的一些 FountainJS 生成器选项:
模块管理, 例如 Webpack https://webpack.github.io/ , SystemJS https://github.com/systemjs/systemjs ;
框架, 例如 React https://facebook.github.io/react/ , Angular2 https://angular.io/ 或 Angular1 https://angularjs.org/ ;
CSS 预处理器, 例如 Sass http://sass-lang.com/ , Less http://lesscss.org/ ;
JavaScript 预处理器, 例如 Babel https://babeljs.io/ , TypeScript https://www.typescriptlang.org/ ;
三个示例应用, 即引导页(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 https://www.browsersync.io/ .
第六步: 使用 Karma 和 Jasmine 测试
Karma http://karma-runner.github.io/latest/index.html 是一种测试框架不可知性的 JavaScript 测试运行器. Jasmine https://jasmine.github.io/ 测试框架已经包含在本例中所使用的 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 服务器上构建并加载项目.
来源: http://www.tuicool.com/articles/fYnYjyY