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前端项目框架啦，你就能够跟你的小伙伴一块儿愉快地合做啦（撒花）