2018-11-13

Yeoman介绍和应用

Yeoman介绍

Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的包管理器）的包装为开发者创建一个易用的工作流。

Yeoman主要有三部分组成：yo（脚手架工具）、grunt（构建工具）、bower（包管理器）。这三个工具是分别独立开发的，但是需要配合使用，来实现我们高效的工作流模式。

Yeoman工具包yo命令

yo插件都是通过npm, Node.js包管理器安装和管理的.

全局安装yo

1	npm install -g yo

如果你还没有安装grunt,bower，也需要一起安装

1	npm install -g grunt-cli bower

Yeoman工具包bower,grunt的组合用法

有关bower的介绍，请参考：bower解决js的依赖管理
有关grunt的介绍，请参考：grunt让Nodejs规范起来

使用bower命令查看项目依赖：

~ D:\workspace\javascript\nodejs-yo>bower list
bower check-new     Checking for new versions of the project dependencies..
nodejs-yo#0.0.0 D:\workspace\javascript\nodejs-yo
├── jquery#1.9.1 (latest is 2.0.3)
├── modernizr#2.6.2
└── requirejs#2.1.8

我们发现生成的webapp中，有4个依赖库，jquery,modernizr,requirejs。

使用grunt命令执行单元测试

D:\workspace\javascript\nodejs-yo>grunt test
Running "clean:server" (clean) task
Cleaning ".tmp"...OK
Running "concurrent:test" (concurrent) task
Running "copy:styles" (copy) task
Running "coffee:dist" (coffee) task
Running "autoprefixer:dist" (autoprefixer) task
File ".tmp/styles/main.css" created.
Running "connect:test" (connect) task
Starting connect web server on localhost:9000.
Running "mocha:all" (mocha) task
Testing: http://localhost:9000/index.html
  1 test complete (107 ms)
>> 1 passed! (0.11s)
Done, without errors.

使用grunt命令启动一个node服务器

1	~ D:\workspace\javascript\nodejs-yo>grunt server --force

修改app/index.html代码，增加对canvas的检查。

~ vi app/index.html
<script>
window.onload = function () {
if (canvasSupported()) {
alert('canvas supported');
}
};
function canvasSupported() {
var canvas = document.createElement('canvas');
return (canvas.getContext && canvas.getContext('2d'));
}
</script>

Yeoman
Yeoman自动构建js项目
 Yeoman：Web 应用开发流程与工具
 Grunt-beginner前端自动化工具

本文标题:Yeoman介绍和应用

文章作者:Youngrivers

发布时间:2018-11-13, 23:28:15

最后更新:2016-07-25, 14:41:56

原始链接:http://yoursite.com/2018/11/13/x15/

许可协议: "署名-非商用-相同方式共享 4.0" 转载请保留原文链接及作者。