如何在 Windows 平台安装与使用 Yeoman 1.0 相关工具

转载 Yeoman 1.0 包含以下三套工具，分别说明如下：

　　yo - the scaffolding tool from Yeoman ( 用来自动产生网站骨架或程式码的工具 )
　　bower - the package management tool ( 用来管理特定网站下所使用的各式前端套件，如: jQuery )
　　grunt - the build tool ( 用来执行一些网站的自动化工作，例如单元测试、最小化、执行批次命令 )
　　要安装这三套工具之前，还有许多相依的工具必须事先安装，否则工具指令会无法正确执行，以下包括 node.js , Git for Windows 与 RubyInstaller 这三套工具的安装注意事项：

　　※ 安装 node.js for Windows

　　请选择正确的 Windows 安装档，注意 CPU 架构有区分 32-bit 与 64-bit 两种：

　　安装时要确保 Add to PATH 项目有被安装进去：
　　※ 安装 Git for Windows 指令列工具

　　安装到 Adjusting your PATH environment 步骤时，选择 Run Git from the Windows Command Prompt 的相容性比较高，问题也会少很多：

　　其他就保留预设值即可安装完成。

　　※ 安装 Ruby 执行环境
由於前端开发作业经常会用到 Compass 工具撰写 CSS，而且在使用 Yeoman 的时候，有些产生器所产生的 grunt 定义档也会用到 Compass 来执行，所以我通常会预先安装好，以免「书到用时方恨少」( 请把书换成工具) 等憾事发生！^_^

不过，安装 Compass 工具会需要先安装 Ruby 才能安装与使用。建议透过 RubyInstaller (Windows) 提供的 MSI 安装档进行安装，但安装的过程中有一个步骤非常重要，你必须在 Installation Destination and Optional Tasks 步骤时，勾选 Add Ruby executables to your PATH 选项才行
　　安装好这些工具之後，就可以开始准备安装 Yeoman 相关工具了：

　　1. 开启 Windows Powershell 或 命令提示字元 (Command Prompt)，以下会以 命令提示字元 为例。

　　2. 透过 node.js 的 npm 套件管理员 ( Node Packaged Modules ) 安装 yo , bower 与 grunt 工具
　　npm install -g yo grunt-cli bower

　　其中 -g 代表要把 yo , grunt-cli , bower 这三个套件安装到全域 (global)
　　3. 安装 yo 相关的 程式码产生器 (generator) 套件

　　因为 yo 这套工具主要就是用来自动产生网站骨架或程式码，在执行 yo 之前，你必须预先安装好这些程式码产生器范本，这些被称为 YEOMAN GENERATORS，你可以在 YEOMAN GENERATORS 找到许多现成的产生器范本，并且一样透过 npm 进行安装。
　　例如你在 YEOMAN GENERATORS 页面找到一个 webapp 产生器，那　你可以用以下指令进行安装：

　　npm install -g generator-webapp

　　如果想安装 angular 产生器，那　你可以用以下指令进行安装：
　　npm install -g generator-angular

　　以此类推！
　　4. 如果你要顺道安装 Compass 的话，也可以输入以下指令进行安装

　　gem update --system

　　gem install compass
　　Yeoman 与 Compass 安装完成！
　　以下就来示范 Yeoman 的使用过程，用以解释 Yeoman 的使用情境，以及如何改善开发流程。我们将利用 yeoman 建立一个全新的网站，以下是操作的步骤：

　　1. 先建立一个网站工作目录 ( 或透过 SVN / Git 建立一个工作目录 )，这是一个完全空白的资料夹：

　　2. 使用 yo 指令产生网站骨架，我们使用 webapp 这个 产生器 (generator) 来建立网站，指令如下：

　　yo webapp

　　此时你会发现，执行 yo 的时候，是一个互动的过程，他会问你几个问题，然後在最後帮你建立好网站：
　　当我们把所有问题回答完毕後，yo 会在最後开始完成所有的安装工作，不过，安装的过程工，很有可能会看到错误讯息。如下图所示，你第一次执行可能会看到以下错误讯息，我将重点文字标示为蓝 {MOD}：

　　Error webapp

　　You don't seem to have a generator with the name mocha:app installed.

　　You can see available generators with npm search yeoman-generator and then install them with npm install [name].
　　To see the 18 registered generators run yo with the `--help` option.
　　上述错误讯息表示，在执行 webapp 产生器的时候，由於会需要用到 mocha:app 这个产生器，这里看到的冒号 ( : ) 代表的是 子产生器 (sub-generator) 的意思，也就是他会执行 mocha 产生器里面的 app 子产生器，所以我们必须另外安装 mocha 这个产生器才能让 webapp 产生器被正确执行。

　　安装 mocha 产生器的方法，在本文稍早已有提过，直接执行以下指令即可：

　　npm install -g generator-mocha

　　这时我们再执行一次 yo webapp 命令，就不会再有错误讯息发生，而且网站骨架会被完整的建立起来。

　　一个简单的指令，实际上却帮我们做了很多事情，我们从产生後的资料夹结构与几个重要的档案来说明：

　　image

　　预设网站根目录会放在 app 资料夹下 (不用问为什　，因为大家都习惯把网站放在 app 目录下)
　　app 资料夹下会有个 bower_components 资料夹，用来放置透过 bower 安装的前端套件。
　　node_modules 资料夹则是 node.js 所需的相关套件，是透过 yo 安装时顺便装上去的。
　　根目录的 Gruntfile.js 是安装 webapp 时预设产生的 grunt 定义档，是预先定义好的工作 (Tasks)
　　bower.json 是 bower 专用的套件定义档，里面定义了目前已经安装好的 bower 套件名称与版本 ( 请不要手动编辑这个档案 )
　　package.json 是 node.js 专用的套件定义档，里面定义了目前已经安装好的 node.js 套件名称与版本 ( 请不要手动 辑这个档案 )
　　其他当然还有许多以小数点开头的档案，都有特殊的用途，之後如果有机会会再做分享。

　　3. 使用 bower 指令安装或移除特定前端套件

　　例如我们想在这个网站额外安装 jQuery UI 套件，此时你可能不知道 jQuery UI 的 bower 套件名称为何，那　你就可以用 bower search [关键字] 搜寻，例如：

　　bower search jquery-ui
　　
　　然後你就可以用 bower install 指令进行安装，如下范例：

　　bower install jquery-ui
　　从执行的过程 (如下图)，你也会看到，执行 bower install 指令的过程，也是互动式的，这里他让你选择 jquery-ui 与 jquery 相依性，如果你选择新版的 jquery 的话，bower 就会帮你安装到最新版的 jquery-ui，如果你选择旧版的 ( jquery 1.9.1 )，那　 bower 也会安装相对应适合的 jquery-ui 版本：

　　bower 套件安装的过程可以有助於你管理日益增多的各式前端套件，跟著 Yeoman 的流程走，的确可以减少许多网站建置的开发时间，尤其是这类套件之间拥有相依姓与版本更新的问题上。

　　不过，你可能也会想问，如果是 jQuery UI 的话，我怎　知道要输入关键字是 jquery-ui 呢？没错，你的关键字也可以直接打 jquery 来搜寻，只是结果比较多一点而已，如果在 Windows 命令提示字元底下，你还可以透过 findstr 命令帮你过滤掉不必要的结果，例如：

　　bower search jquery |findstr ui
　　或者，你也可以用 bower search 指令 (不加其他参数)，用以列出所有可安装的套件清单，我个人习惯是将所有套件存成一个文字档，然後在记事本或 Notepad2 里面进行搜寻：
　　bower search > all_bower_packages.txt
　　( 注: 截至今日为止，已经有 3,765 个套件在上面，每天都在增加当中… )

　　若要移除刚刚安装的 jquery-ui 套件，使用 bower uninstall [套件名称] 指令即可移除，如下范例：

　　bower uninstall jquery-ui
　　若要查询 bower 指令的完整用法，可以直接输入 bower 指令，即可显示相关说明：

　　4. 使用 grunt 指令执行自订工作

　　由於 grunt 的主要任务就是执行那些预先定义好的工作，也就是那些重复性的、流程复杂的工作，透过预先定义的方式，让你透过简单的指令来执行。以我们刚刚透过 webapp 产生器安装的网站骨架来说，已经内建了许多好用的 grunt 工作，如果想得知到底有哪些工作可用，可以输入以下指定查询：

　　grunt --help
　　你可以看到 Available tasks 的地方，已经定义好了许多工作：

　　不过，光是看这些预先定义好的工作名称，你可能也不知道要执行那些，而且有些工作是有顺序性的，若执行的顺序颠倒，可能也执行不出甚　结果。比较好的研究方法，则是开启 Gruntfile.js 档案，查看该文件最後面的 grunt.registerTask 定义，例如：