前端自动化开发流程
安装 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 // 回车后等待它自己完成基本框架
过程如图:
应用目录:
启动服务器
grunt serve
执行结果如图:同时将打开浏览器。
在终端按 Ctrl+c 可以退出。
测试项目
命令如下:
grunt test
执行结果如图:
上线前的优化
现在创建一个上线版本。 我们需要规范代码、跑测试、压缩JS和CSS代码(减少网络请求)、优化图片还有编译使用了预处理的代码,让我们的应用尽可能的精简。
非常神奇的是,上面的工作我们都能通过下面这行命令实现:
grunt
这行命令会遍历Yeoman生成的Grunt任务和配置,然后创建出应用的过渡版本。过一会命令行中会显示出应用的结构和生成这个应用总共花费的时间,以及完成每一项任务所花费的时间。
此时我们应用的目录下就多了一个 dist
的文件夹。
如果想在本地查看这个应用的话,运行下面这行命令:
grunt serve:dist
它会生成你的项目并且启动本地的服务器。
参考资料
伯乐在线的翻译文章:Yeoman官方教程:用Yeoman和AngularJS做Web应用