Yeoman-- 一个强大的前端构建工具

上期跟大家试了试Vue-cli这个构建工具，这个让我想起了很多其他的前端工具，其中一个就是Yeoman（上次就剧透了的）,所以这期跟大家先简单介绍下这个脚手架工具，然后慢慢一步步深入下去。

先说说Yeoman是什么，它想做什么？

Yeamon帮助你快速的开展一个项目工程，提供最佳实践和工具，来让你保持高效率编码。

他们自己提供了一个构建生态系统，主要通过‘yo’这个命令来构建一个完整的项目或者项目的一部分。

通过官方的生成器，他们建立了一个Yeoman的工作流，这个流是由一个强大的,固定的客户端组建，包含工具和框架帮助开发者快速建立牛逼的web应用。他们尽量提供了开发者所需的东西。

作为良好文档和深入思考构建过程的思想者，Yeoman包含了检测（静态检测）、测试以及压缩等等一系列工具，让开发者能够更加专注于思考解决方案。

Yeoman其实是3个工具的总和：

• yo --- 脚手架，自动生成工具
• Grunt、gulp --- 构建工具 （最初只有grunt，后面gulp火了添加进来的）
• Bower、npm --- 包管理工具 （原来是 bower，后面添加了npm）

上面的三个是各自独立发展和运行的，混合后效果就不一样，主要在于yo，相当于一个粘合剂一样，把grunt这些工具粘合在一起。

安装方式，一行代码

npm install -g yo //权限不够，请加上 sudo，一般来说mac都需要。

安装完成之后，你就拥有了1个命令 -- yo

Paste_Image.png

看到，使用时，官方已经在提示你了，我们选择 Install a generator，输入react，得到很多选择，我选择了 react-fullstack（如果安装需要权限，sudo yo即可，注意看安装失败的log）

Paste_Image.png

接着等待安装，进度条时间，谈谈这个命令，yo这个命令跟前面vue-cli一样，现在下载的generator其实就是相当于模板一样，来生成你需要的project的最基本架构，包括你主要使用的框架-- react、angular、polymer、backbone、ember，构建工具---grunt、gulp、webpack等，现在还包括了nodejs的模块--express、node-webkit等等一系列各种工具。

官方生成器： http://yeoman.io/generators/

如果不用yo命令来安装generator，可以自己手动安装你想要的:

npm install -g generator-react-fullstack // 记得权限，记得给包前面加上generator.

装完界面变成这个样子了，我们选择generator，run一下。

Paste_Image.png

同样，我们需要填写一个信息来配置下项目名称,又是进度条时间。

现在你可以看见你的文件夹下面已经有新的文件和文件夹建立出来，等待完成，然后

npm run start

Paste_Image.png

页面如图所示：

Paste_Image.png

这个项目挺值得研究的，他比 Tj大神的frontend-boilerplate这个复杂，而且使用的东西更多。具体可以参考它的github主页。

我们可以看到的是，几个简单的命令，Yeoman就帮助我们建立一个项目，而且项目已经填充了不少代码，我们可以选择一个自己喜欢的，来沿着别人的已经搭建好的构架来编写业务即可，这对很多新手来说是非常好的一种提高方式，所以建议大家选star多的 ---代码风格好，文件夹规划清晰，js的模块拆分细致合理。

那么我们再后面的某一期来实践下，编写一个自己的generator玩玩

参考网站： http://yeoman.io/；