前言
在现代 Web 开发中，使用框架快速搭建应用已经成为常态。尤其对于 Angular 项目，为了简化工程搭建流程，我们可以使用 Yeoman 去创建应用的骨架。而 generator-angular-hello 正是一个基于 Yeoman 搭建的 Angular 应用的生成器，本文介绍了如何使用这个生成器。
安装
我们可以使用 npm 命令来安装 generator-angular-hello：
npm install -g yo generator-angular-hello
创建新项目
在安装好 generator-angular-hello 后，我们可以使用以下命令启动命令行交互式脚本：
yo angular-hello
之后，我们会看到如下的命令行，根据需要回答相应的问题：
-- -------------------- ---- ------- --- ------ --- ---- -- ---- ------------ -- --- ----- ---- -- ------ ------ -- --- ---- --- --- ----- -- --------- ----- --- ---- -- ---- --------- --- ----- --- ---- -- ------- ---- ------ --- --- ----- --- ---- -- ------- ---------- ----- ------ --- --- ----- --------- ----- --- ---- -- -------- ------ ------- -- ------- -- ---------- - ----------- - ---------
通过以上交互式命令行，我们可以创建一个新的应用项目。generator-angular-hello 在创建项目的同时也会自动将所选的依赖（Angular、Bootstrap、ES6 模块等）添加到项目中。完成后，我们就可以开始使用这个新项目进行开发了。
生成的项目结构
使用 generator-angular-hello 创建的项目，其结构基本上是按照一定的规范建立的。接下来，我们来看一下这个结构的具体内容。
文件储存结构
-- -------------------- ---- -------
-
--- ---------- - --- --------
--- --------- - ------ --------
--- ----------- - ---------- ------ ----
--- ---------- - --------- ----- ----
--- ------------ - ----- -------
--- ------------- - ----- -----
--- ------------ - --------- --- ----
--- --------- - ------
--- --- - -------
--- --- - ------
- --- ------ - ---------
- --- ---------- - -- -- --
- - --- ------- - -------
- - --- ---------------------
- - --- --------------------
- --- ----- - ---- -
- - --- ---------- - ---- --
- - --- -------- - -----------
- - --- ------------------- - ---- - -------
- --- ----- - ---- -
- --- ---------- - ---- --
- --- -------- - -----------
- --- ------------------- - ---- - -------
--- ------ - -------
--- ---------- - ------- ---- --
--- ---- - ---- -----可以看出，生成的文件结构非常清晰，可以让我们很方便地在开发过程中进行组织。
Grunt 任务
与项目一起生成的是一个 Gruntfile.js，其中包含了一些常用的构建任务，包括：
grunt serve：启动一个 Web 服务器，提供 Web 应用程序入口点的访问grunt test：运行应用程序中所有的单元测试grunt build：将 Web 应用程序构建到 dist/ 目录下，准备发布生产版本
总结
通过本文，我们学会了如何使用 generator-angular-hello 创建一个新的 Angular 项目，同时，我们也介绍了项目的结构以及 Grunt 任务。对于前端开发工程师来说，这些应该是不可或缺的技能，希望本文对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005549781e8991b448d1d80