前端自动化开发流程

安装 Node.js 和 npm

自行百度吧，我

Node.js

安装好久了, 最好还是看官方文档 。

安装 Yeoman

我这里很多时候都需要使用

sudo

身份运行 。 windows用户无需输入 sudo 直接输入 npm install -g yo 下面的也是同样不需要输入 sudo

sudo npm install -g yo

检查是否安装成功 。

yo -v && bower -v && grunt--version

如果安装成功，应该打印出四个版本号 。

安装 angular 生成器

sudo npm install -g generator-angular

创建项目

mkdir myproject
cd myproject
sudo yo angular          // 以超级管理员的身份运行angular 生成器，避免用户权限问题
// 下面的内容根据自身需要选择
No          // 不使用 Sass
Yes         // 使用 Bootstrap
enter       // 回车后等待它自己完成基本框架

过程如图:



应用目录：

启动服务器

gruntserve

执行结果如图：同时将打开浏览器。





在终端按 Ctrl+c 可以退出。

测试项目

命令如下：

grunttest

执行结果如图：

上线前的优化

现在创建一个上线版本。 我们需要规范代码、跑测试、压缩JS和CSS代码（减少网络请求）、优化图片还有编译使用了预处理的代码，让我们的应用尽可能的精简。
非常神奇的是，上面的工作我们都能通过下面这行命令实现：

grunt

这行命令会遍历Yeoman生成的Grunt任务和配置，然后创建出应用的过渡版本。过一会命令行中会显示出应用的结构和生成这个应用总共花费的时间，以及完成每一项任务所花费的时间。



此时我们应用的目录下就多了一个

dist

的文件夹。



如果想在本地查看这个应用的话，运行下面这行命令：

gruntserve:dist

它会生成你的项目并且启动本地的服务器。

参考资料

伯乐在线的翻译文章：Yeoman官方教程：用Yeoman和AngularJS做Web应用