前端自动化开发流程

安装 Node.js 和 npm

自行百度吧,我 Node.js 安装很久了, 最好仍是看官方文档 。npm

安装 Yeoman

我这里不少时候都须要使用 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       // 回车后等待它本身完成基本框架

过程如图:框架

图片描述


应用目录:grunt

图片描述

启动服务器

grunt serve

执行结果如图:同时将打开浏览器。测试

图片描述


图片描述

在终端按 Ctrl+c 能够退出。优化

测试项目

命令以下:spa

grunt test

执行结果如图:命令行

图片描述

上线前的优化

如今建立一个上线版本。 咱们须要规范代码、跑测试、压缩JS和CSS代码(减小网络请求)、优化图片还有编译使用了预处理的代码,让咱们的应用尽量的精简。
很是神奇的是,上面的工做咱们都能经过下面这行命令实现:

grunt

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

图片描述

此时咱们应用的目录下就多了一个 dist 的文件夹。

图片描述

若是想在本地查看这个应用的话,运行下面这行命令:

grunt serve:dist

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

图片描述

图片描述

参考资料

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

相关文章
相关标签/搜索