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(包管理器)。这三个工具是分别独立开发的,但是需要配合使用,来实现我们高效的工作流模式。

下面这幅图很形象的表明了他们三者之间的协作关系。
Github+yeoman+gulp-angular初始化搭建angularjs前端项目框架

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

安装成功后,会看到下面的提示:

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

安装生成器(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生成器解析

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

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

如果没有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则是上传本地所有分支代码到远程对应的分支上。

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

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

上一篇:Git速成学习第五课:分支管理策略


下一篇:LG2634 [国家集训队]聪聪可可