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

2022-05-02 09:34发布

转载 Yeoman 1.0 包含以下三套工具,分别说明如下:  yo - the scaffolding tool from Yeoman ( 用来自动产生网站
1条回答
1楼 · 2022-05-02 10:21.采纳回答
  转载 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 定义,例如:

一周热门 更多>