Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

在上篇文章里面我们说到了Github账号的申请与配置

那么当你有了Github账号并创建了一个自己的Github项目之后，首要的当然是搭建自己的项目框架啦！

本人对自己的定位是web前端狗，常用开发框架是angular，所以在这里主要说Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架。

什么是Yeoman？

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

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

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

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

Yeoman特性

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

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

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

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

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

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

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

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

Yeoman安装前的准备工作

检查系统中是否安装了：Node.js、Ruby、Compass。

Mac下安装Node.js非常方便，首页提供了一个pkg下载，双击后可以默认安装node、npm到/usr/local/bin下，我们只需要确保/usr/local/bin包含在PATH变量中就可以。

Mac Mountain Lion 下自带了Ruby，所以也就不需要再单独安装了。

Compass安装需要依赖于Ruby Gems，执行下面的步骤：

$sudo gem update --system
$sudo gem install compass

安装Yeoman

环境准备好之后，就可以进行安装了，执行：

$sudo npm install -g yo

安装成功后，会看到下面的提示：

安装生成器（generator）

安装好yo 之后呢，我们需要在安装我们需要的生成器，什么是生成器呢？其实就是项目模板，而Yo只是创建这模板的指挥员而已

所以，我们需要选择我们复合需求的生成器，官网里已经有很多已经搭建好的生成器，详情

而命令也很简单，今天我们主要用gulp-Angular这个生成器

在这之前，先安装依赖的gulp和bower

$sudo npm install -g yo gulp bower

然后，安装生成器

$sudo npm install -g generator-gulp-angular

 运行生成器

安装完成后，我们先创建一个我们的项目目录（最好与github上面的仓库同名），并进入目录

$mkdir 文件名 && cd $_

然后运行我们的生成器

yo gulp-angular

之后只要按照terminal里面给出的提示选择我们需要安装的包就可以了

gulp-Angular生成器解析

执行完以上步骤以后，文件目录应该大致如下：

如果没有bower_componets或者node_modules目录，那就需要手动安装了,执行

$npm install   // 生成node_modules
$bower install // 生成bower_componets

• bower_componets: bower.json中的依赖包目录

• e2e: 测试目录

• gulp: gulp配置目录

• node_modules: package.json里面依赖包目录

• src: 源文件目录（也就是我们主要编码，处理过的）

• .bowerrc: bower配置文件，可以设置安装位置

• .gitignore: 配置Git上传时忽略文件名

• bower.json: bower 安装的依赖配置

• gulpfile.js: gulp 运行的入口文件，和makefile同理

• karma.conf.js: karma 测试文件

• package.json: npm 安装的配置

• protractor.conf.js: Angular 专门的测试框架

接着，在项目根目录执行

$gulp

会多出.tmp和dist目录

• .tmp: 处理过程的临时文件

• dist: 进行各种注射，压缩等处理后的项目文件

将初始化好的前端项目框架push到github远程仓库

首先在文件目录下输入

$git init

将其初始化为一个git本地仓库

然后输入

$git remote add origin 你需要连接的远程仓库的HTTPS/SSH

将你的本地仓库与远程仓库连接起来

此时没有报错说明连接成功了，那么我们就继续进行下一步

$git pull
$git add .
$git commit -m "init"
$git push origin master

git pull 是先把远程仓库的最新变动更新到你的本地工作区去，否则无法提交本地工作区的更新代码。

git add . 的意思是监控工作区的状态树，把工作时的所有变化提交到暂存区，包括文件内容修改(modified)以及新文件(new)，但不包括被删除的文件。

使用git commit 的原因是Git 每次提交代码，都要写 Commit message（提交说明），否则就不允许提交。上面代码的-m参数，就是用来指定 commit mesage 的，上文例子中的Commit message为“init”。

git push origin master的意思就是上传本地当前分支代码到master分支。git push则是上传本地所有分支代码到远程对应的分支上。

这样你的远程仓库也会有你搭建好的angularjs前端项目框架啦，你就可以跟你的小伙伴一起愉快地合作啦（撒花）