基于ANGULAR.JS的下一代WEB应用开发-01-yeoman

Angularjs 个人认为这是一款很好的框架！它将我们从AJAX应用的开发中解救了出来！嗯。。。。废话就说道这里下面我们开始把！

　　

　　首先我们必须了解一些核心的概念：

1. 客户端模版
2. MVC
3. 数据绑定
4. 依赖注入
5. 指令

　　

　　先不要着急，了解这些词语的意思和含义，万丈高楼平地起我们慢慢来构建一个属于我们自己的小应用。

　　

　　

• 确定我们的目标

　　　首先我们必须确定自己要做什么？做个什么呢？YOUKU TUDOU那样的视频网站，哦，拜托杀了我把，我只想了解下这个东西，嗯！那就写个简单的博客吧！你还是杀了我把，由于本人太懒，所以就做个登录注册的应用好了，对啊因为登录注册到哪里都需　　        要，所以我决定把他写成一个基于ANGULAR的小框架！

• 我们需要准备什么

　　　好的确定了目标我们需要准备些什么呢？扳手啊！锤子啊！钉子啊！。。。。乱七八糟的一大堆，头已经晕掉了！

　　　确实在现实生活中，如果我们要做一个应用需要至少列个清单准备这样或者那样的东西，这真是令人头疼的一件事情，对于这么懒的我来说，你还是杀了我把！

　　　所以我决定寻找一款项目构建工具，在GOOGLE一段时间后！呵呵，YEOMAN 出现在了我的视野当中，这完全就是为我们前端开发者量身打造的啊！

　　

• 了解 配置 YEOMAN

唉懒得打字了 所以我决定COPY一段别人的介绍

　　　

Yeoman是Google的团队和外部贡献者团队合作开发的，他的目标是通过Grunt（一个用于开发任务自动化的命令行工具）和Bower（一个HTML、CSS、Javascript和图片等前端资源的  包管理器）的包装为开发者创建一个易用的  工作流。

 

Yeoman的目的不仅是要为新项目建立工作流，同时还是为了解决前端开发所面临的诸多严重问题，例如零散的依赖关系。

 

Yeoman主要有三部分组成：yo（脚手架工具）、grunt（构建工具）、bower（包管理器）。这三个工具是分别独立开发的，但是需要配合使用，来实现我们高效的工作流模式。

 

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

YOMAN的特性

 

闪电般的初始化：项目开始阶段，可以基于现有的模板框架（例如：HTML5 Bolierplate、Twitter Bootstrap）进行项目初始化的快速构建。

了不起的构建流程：不仅仅包括JS、CSS代码的压缩、合并，还可以对图片和HTML文件进行优化，同时对CoffeScript和Compass的文件进行编译。

自动编译CoffeScript和Compass：通过LiveReload进程可以对源文件发生的改动自动编译，完成后刷新浏览器。

自动Lint代码：对于JS代码会自动进行JSLint测试，确保代码符合最佳编程实践。

内置的预览服务器：不再需要自己配置服务器了，使用内置的就可以快速预览。

惊人的图片优化：通过使用OptiPNG和JPEGTran来优化图片，减少下载损耗。

杀手级包管理：通过bower search jQuery，可以快速安装和更新相关的文件，不再需要打开浏览器自己搜索了。

PhantomJS单元测试：可以非常方便的使用PhantomJS进行单元测试，一切在项目初始的时候都准备好了

 

呵呵多好（http://www.cnblogs.com/cocowool/archive/2013/03/09/2952003.html） 感谢这位博友吧！

 

下面我简单说下应该怎么安装YEOMAN 在WINDOWS下面

 

打开 cmd.exe

1. 安装Chocolatey NuGet
2. 安装 node.js and ruby
   1. cinst ruby1.9 (the "ruby" package installs ruby 2.0, which might not work)
3. 重启 cmd.exe
4. gem install compass --pre  （这个我觉得无所谓可以不装）
5. npm install -g yo grunt-cli bower  这个命令必须执行
6. 需要安装GIT 自己去下吧
7. 重启CMD运行 yeoman
8. 这个英文原版是https://gist.github.com/jaromero/9964937这里，大家可以自己去看哦！

　　

　　额！我还忘了一点，WINDOWS用户需要配置好YEOMAN 的环境变量哦！要不然CMD 命令是会找不到的

　　

　　嗯！今天就这样吃饭去了，下一节我们来构建应用骨架。