2.6 Yeoman Ionic Generator

发布于 2025-02-26 23:07:09 字数 4884 浏览 0 评论 0 收藏 0

generator-ionic

用到的名字，有更好的想法请联系我：
host v. 主导
scaffold 搭建，脚手架
generator 生成器
build 构建
confguration-over-code 编码之上配置
code-over-confguration 配置之上编码

我觉得虽然 Ionic CLI 非常不错了，但是他没有相对应的工作流。我说的工作流指的是开发代码和生产代码之间的分界。在通过 Ionic CLI 搭建的项目中， www 文件夹主导了开发代码和生产代码。当你的代码越来越多的时候，这会成为一个需要面对的问题了。
这就是 generator-ionic 价值体现的地方了。generator-ionic 是一个用来搭建 Ionic 项目的 Yeoman 生成器。如果你还不知道 Yeoman 是什么东西的话，那么我就告诉你吧。Yeoman 是一个使用 Grunt，Bower 以及 Yo 搭建 app 的脚手架工具。并且，他们很快就会支持 gulp 了。

为什么选择 Yeoman？ 和其他语言的 IDE 不同的是 JavaScript 或者说 web 开发没有统一的开发环境，IDE 里用户只需导航到 File | New | AngularJS 项目 或者 File | New | HTML5 项目 。这也是 Yoeman 为什么适合的地方。

Ionic 有自己的 CLI 来搭建 app。但是对于其他没有生成器的框架，Yeoman 提供了基本的生成器。

想要了解 Yeoman 更多信息，请参考： http://yeoman.io/，想要研究 Yeoman 生成器，请参考：http://yeoman.io/generators/

Ionic 也有其他一些生成器，但是我对 generator-ionic 的工作流和功能情有独钟。

安装 generator-ionic

安装 generator 之前，我们需要全局安装 yo ，grunt ，以及 grunt-cli 。使用如下命令安装即可：

npm install yo grunt grunt-cli -g

Grunt 是另一个与 Gulp 类似的构建工具。Grunt 和 Gulp 最大的不同是：Grunt 是一个编码之上配置的构建工具，而 Gulp 是配置之上编码的构建工具。

更多关于 Grunt 的信息参考： http://gruntjs.com/ 关于我对 Gulp 与 Grunt 的见解，这里有更详细的解读： http://arvindr21.github.io/building-n-Scaffolding

就诶下来，我们将要全局安装 generator-ionic：

npm install generator-ionic –g

安装的时候带有-g 标识的值需要安扎 ungyici 就够了。不用每次使用的时候都去安装一遍。

现在，我们可以使用 generator-ionic 创建一个新的 Ionic 项目了。通过 cd 命令进入到 chapter2 ，然后在其中建立一个新的文件夹名为 example4 。然后运行如下命令：

yo ionic example4

与 Ionic CLI 不同的是，你需要回到一些关于你想要怎么创建你的应用的问题。你可以参考以下回答：
screentshot

Yeoman 将会下载项目运行所需的所有的东西。一旦 Yeoman 搭建完成之后，你可以进入到 example4 文件夹。你会看到里面会有大量的文件以及文件夹。

关于完整项目结构，可以参考： https://gitHub.com/diegonetto/generatorionic#project-structure

Ionic-CLI 搭建的 app 和 generator-ionic 搭建的 app 有一些很关键的不同点：

app：与 Ionic CLI 搭建的 app 不同的是，我们的开发将在 app 文件夹中进行，而不是 www 文件夹内。这就是我之前提到的代码分界。我们在 app 文件夹中进行开发，然后运行构建脚本以清理文件和将他们放到 www 文件夹内共生产之用。

hooks：hooks 文件夹里面会多出了 4 个脚本。

Gruntfile.js：与 Ionic CLI 不同的是 generator-ionic 使用 Grunt 管理任务。如果你觉得这里需要学习的东西太多的话，我建议你用 Ionic CLI 与 GULP，而不是 generator 和 Grunt。
如果你使用 generator-ionic 搭建 app 的话，不要在动 www 里面的东西。当你运行 build 命令的时候，这个文件夹里面的内容将会被清空，然后从 app 文件夹中重新生成。可以通过这个地址查看运行 app 时可以用到的工作流命令： https://gitHub.com/diegonetto/generatorionic#workflow-commands 所有的 CLI 方法都被 grunt 命令包装起来了。因此，例如当你想要执行 Ionic 服务的时候，在使用 generator-ionic 的情况下通过运行 grunt serve 即可。

所以，我们通过以下命令来运行搭建的 app 吧：

grunt serve

你可以看到跟用 Ionic CLI 搭建的 tab app 一样的输出。
还有三个使用 generator-ionic 而不是 Ionic CLI 的理由是他支持以下：

代码提醒： https://github.com/diegonetto/generatorionic#grunt-jshint
使用 Karma（一个测试框架）进行测试，使用 Istanbul 进行覆盖： https://github.com/diegonetto/generator-ionic#grunt-karma
Ripple 模拟器： https://github.com/diegonetto/generatorionic#grunt-ripple 想你举证使用 generator-ionic 的主要原因是当你的 app 变大的时候，你可以导入这个工作流。再次声明，这个个人推荐，可能你喜欢 Ionic CLI 也说不定。
你也可以使用其他你觉得用起来比较舒服的 Ionic 生成器。

总结

本章中，你收获了一些移动混合应用架构的知识。同时你也学会了混合 app 是如何工作的。我们也看到了 app 中 Cordova 是如何将 HTML，CSS,以及 JS 代码缝合到一起然后在 web view 中执行的。然后，我们在本地安装了 Ionic 开发需要的软件。我们使用 Ionic CLI 搭建了一个空白模板并且分析了他的项目结构。紧接着，我们搭建了另外两个模板并且区分了他们之间的同步。我们还安装了 generator-ionic 并且用他搭建了一个范例 app，分析了他与 Ionic CLI 搭建的项目之间的不同点。