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


ʱ䣺2019-08-12

  grunt - the build tool ( 用来执行一些网站的自动化工作,例如单元测试、最小化、执行批次命令 )

  要安装这三套工具之前,还有许多相依的工具必须事先安装,否则工具指令会无法正确执行,以下包括 node.js , Git for Windows 与 RubyInstaller 这三套工具的安装注意事项:

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

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

  例如你在 YEOMAN GENERATORS 页面找到一个 webapp 产生器,那你可以用以下指令进行安装:

  4. 如果你要顺道安装 Compass 的话,也可以输入以下指令进行安装

  以下就来示范 Yeoman 的使用过程,用以解释 Yeoman 的使用情境,以及如何改善开发流程。我们将利用 yeoman 建立一个全新的网站,以下是操作的步骤:

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

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

  此时你会发现,执行 yo 的时候,是一个互动的过程,他会问你几个问题,然後在最後帮你建立好网站:

  当我们把所有问题回答完毕後,yo 会在最後开始完成所有的安装工作,不过,安装的过程工,很有可能会看到错误讯息。香港挂牌,如下图所示,你第一次执行可能会看到以下错误讯息,我将重点文字标示为蓝色:

  上述错误讯息表示,在执行 webapp 产生器的时候,由於会需要用到 mocha:app 这个产生器,这里看到的冒号 ( : ) 代表的是 子产生器 (sub-generator) 的意思,也就是他会执行 mocha 产生器里面的 app 子产生器,所以我们必须另外安装 mocha 这个产生器才能让 webapp 产生器被正确执行。

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

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

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

  预设网站根目录会放在 app 资料夹下 (不用问为什,因为大家都习惯把网站放在 app 目录下)

  bower.json 是 bower 专用的套件定义档,里面定义了目前已经安装好的 bower 套件名称与版本 ( 请不要手动编辑这个档案 )

  package.json 是 node.js 专用的套件定义档,里面定义了目前已经安装好的 node.js 套件名称与版本 ( 请不要手动 辑这个档案 )

  其他当然还有许多以小数点开头的档案,都有特殊的用途,之後如果有机会会再做分享。

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

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

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

  或者,你也可以用 bower search 指令 (不加其他参数),用以列出所有可安装的套件清单,我个人习惯是将所有套件存成一个文字档,然後在记事本或 Notepad2 里面进行搜寻:

  ( 注: 截至今日为止,已经有 3,765 个套件在上面,每天都在增加当中… )

  若要查询 bower 指令的完整用法,可以直接输入 bower 指令,即可显示相关说明:

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

  你可以看到 Available tasks 的地方,已经定义好了许多工作:



    友情链接:

Copyright 2018-2021 开奖直播 版权所有,未经授权,禁止转载。