前端自动化开发流程

发布时间:2019-06-23 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了前端自动化开发流程脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。

安装 Node.js 和 npm

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

安装 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 serve 

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

前端自动化开发流程


前端自动化开发流程

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

测试项目

命令如下:

grunt test

执行结果如图:

前端自动化开发流程

上线前的优化

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

grunt 

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

前端自动化开发流程

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

前端自动化开发流程

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

grunt serve:dist

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

前端自动化开发流程

前端自动化开发流程

参考资料

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

脚本宝典总结

以上是脚本宝典为你收集整理的前端自动化开发流程全部内容,希望文章能够帮你解决前端自动化开发流程所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。