Grunt - Yeoman

什么是Yeoman?

现代 Web App 的脚手架工具

Yeoman 的作用

在 Web 项目的立项阶段,使用 Yeoman 来生成项目的文件,代码结构。Yeoman 自动将最佳实践和工具整合进来,大大加速和方便了我们后续开发。

Yeoman是Google的团队和外部贡献者团队合作开发的,他的目标是通过Grunt(一个用于开发任务自动化的命令行工具)和Bower(一个HTML、CSS、Javascript和图片等前端资源的包管理器)的包装为开发者创建一个易用的工作流。
Yeoman的目的不仅是要为新项目建立工作流,同时还是为了解决前端开发所面临的诸多严重问题,例如零散的依赖关系。
Yeoman主要有三部分组成:yo(脚手架工具)、grunt(构建工具)、bower(包管理器)。这三个工具是分别独立开发的,但是需要配合使用,来实现我们高效的工作流模式。

下面这幅图很形象的表明了他们三者之间的协作关系。

Yeoman.png

YOMAN的特性

闪电般的初始化:项目开始阶段,可以基于现有的模板框架(例如:HTML5 Bolierplate、Twitter Bootstrap)进行项目初始化的快速构建。
了不起的构建流程:不仅仅包括JS、CSS代码的压缩、合并,还可以对图片和HTML文件进行优化,同时对CoffeScript和Compass的文件进行编译。
自动编译CoffeScript和Compass:通过LiveReload进程可以对源文件发生的改动自动编译,完成后刷新浏览器。
自动Lint代码:对于JS代码会自动进行JSLint测试,确保代码符合最佳编程实践。
内置的预览服务器:不再需要自己配置服务器了,使用内置的就可以快速预览。
惊人的图片优化:通过使用OptiPNG和JPEGTran来优化图片,减少下载损耗。
杀手级包管理:通过bower search jQuery,可以快速安装和更新相关的文件,不再需要打开浏览器自己搜索了。
PhantomJS单元测试:可以非常方便的使用PhantomJS进行单元测试,一切在项目初始的时候都准备好了。

Yeoman 的使用

安装 angular
yo angular learnangular(项目名)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 173,680评论 25 708
  • 本文首发于 GitChat,现免费放出~感谢大家的支持。 我们都知道,大学几乎是没有 Web 前端课的。以我所在的...
    hylerrix阅读 4,925评论 6 60
  • 接着上篇的《 利用Node.js搭建前端自动化平台 》我们开始搭建自己的前端工作流吧!要启动一个项目,最先要做什么...
    Max_Law阅读 3,190评论 0 7
  • 有点犹豫,因为有些东西快没了,我抓不住她,不想她走,草!
    开车撞你阅读 332评论 0 0
  • 文/琉璃 炙热的九月,阳光还热衷于烤灼大地的每一寸皮肤,而我就在这个时候,拖着笨重的行李箱,来到了“你”的城市——...
    琉璃7阅读 483评论 3 3