yeoman-bower-grunt之间的关系

npm install -g yo

前置技能

Node and NPM

nodeJs就是基于谷歌v8引擎的一个javascript环境，使js不仅可以运行在浏览器端，也能在服务器端运行。

NPM(Node Package Manager)，是nodeJs的包管理工具，其主要作用就是可以利用npm下载和管理库框架之类的开发工具。

NPM使用

NPM主要用的命令就是npm install，例如：

npm install -g yo

其中可以通过加入-g意味着全局安装。如果直接执行npm install不带其他任何参数，则意味着根据当前目录中package.json文件的要求安装工具。

package.json

{

  "name":"xxx",

  ...

  "dependencies":{},

  "devDependencies": {

    "grunt": "^0.4.5"

  },

  "engines":{

    "node": ">=0.10.0"

  },

  "script":{

    "test": "grunt test",

    "install":""

  }

  ...

}

如上就是一个简单的package.json文件，该文件采用json(JavaScript Object Notation)语法.
- name就是该package的名字;
- dependencies是该项目在生产环境中所依赖的包;
而devDependencies就是该项目在开发环境中所依赖的包。当在该文件目录下键入npm install时，就会根据devDependencies下的内容下载所需工具。这里为空是因为虽然我们的项目是一个node项目，但是将来在开发的时候是一个站点，声明是没有意义的。如上例子中^0.4.5意味着下载以0.开头的最新版本——0.x.x。而如果版本号为~0.4.5,则意味着下载以0.4开头的最新版本——0.4.x;
- engines是指项目所需的node版本必须大于0.10.0；
- scrpit，指可以直接运行的脚本命令,在上面的例子我们输入npm test，就会执行grunt test命令

前端集成解决方案

很简单，所谓前端集成解决方案,就是一套包含框架和库，帮助开发者高效构建web应用程序的工作流。而如何实现前端集成解决方案呢，这就用到了下面的Yeoman，Bower和Grunt/Gulp，这些都是通过命令行实现的；也有可视化的工具，如FIS，Spirit。

Yeoman

什么是Yeoman

Yeoman是现代webapp的脚手架工具。

Yeoman的作用

Yeoman可以方便的为你初始一个项目，包括生成项目文件，代码结构，包依赖，初始页面的例子，等等，他预制了大量的最佳实践——generators，并自动将其与工具整合起来供你使用。

generators

根据你项目所需，比如你的项目中要用angular，那么你可以到Yeoman的官网中，找到Discovering generators子页面，在里面找到angular的generators，找到适合你的最佳实践，其中带有八字胡的generators表示为Yeoman官方推出。除了最佳实践，Yeoman还是为我们统一了一些现阶段公认的例如代码校验，测试，压缩这些基本工作的流程。

使用Yeoman

npm install -g generator-angular

yo

首先用npm下载generator，这里下载的是angular
直接在控制台输入yo便会自动出现提示，根据提示便可以根据你需要的generator生成项目。

文件分析：

package.json

Yeoman构建的项目是基于node的项目，对于基于node的项目，首先看的是package.json文件，这里包含这个项目最直观的描述。上面已经说过了，这里就不再赘述。

Gruntfile.js

就是Grunt的配置文件

bower.json

bower的json文件，告诉bower该下载哪些配置包

.bowerrc

bower本身的配置文件，比如线上的框架组件拉下来要存放的目录，可以在这个文件里配置

.gitignore

指忽略不上传到git的文件

.gitattributes

git的配置文件

.editorconfig

第三方工具，指定编辑器如tab，代码缩进之类的操作

test文件

项目的自动化测试

app文件

存放我们项目的源文件，包括html，css，js，img之类

Bower

什么是Bower

Bower是web包管理器。

Bower的作用

一个web站点可以包括：框架，库以及一些公共部分等，而Bower就是用来跟踪管理这些。例如你有一个项目，他需要jQueryv1.2.1我们一般的做法是去官网下载指定的jquery版本(当然也可以用cdn),但是用了bower可以轻松的根据需要自动下载所需版本库。

使用Bower

利用bower下载jquery

bower instal jquery

首先bower会查找jquery是否在它的注册库里，然后找到对应的github地址，然后下载安装最新稳定版本。

如果组件没有在bower注册，那么可以尝试其他安装方式

github短写安装 jquery/jquery
项目完整的github地址安装 https://github.com/jquery/jquery.git
通过url进行安装 http://libs.baidu.com/jquery/1.9.0/jquery.js

bower.json好处：

版本仓库中只需要保存bower.json文件，其他成员把文件check到本地时，输入bower isntall，就会按照bower.json配置项下载包。
不占用公共库空间
保持公共库的最新稳定版本

生成bower.json配置文件

bower.init

根据提示一步步进行即可。

安装包并写入devDependencies

bower install angular --save-dev

不加dev就会写入dependencies

.bowerrc

directory为bower下载包的目录
proxy：代理如:”http//proxy.tencent.com:8080”
timeout:根据网速修改时间

Grunt

什么是Grunt

Gurnt是javascript的任务运行器。其含有庞大的生态圈，可以提供各种你所需要的插件。

Grunt的作用

对于需要重复执行的任务，例如压缩，编译，单元测试等，可以使用自动化工具来减少不必要的时间精力，而Grunt由于庞大的生态圈，可以在其找到各种你所需的自动化插件。

使用Grunt

安装：

npm install -g grunt-cli

gruntcli的作用是调用与gruntfile同一目录的grunt。

npm install grunt --save-dev

npm isntall grunt-contrib-jshint --save-dev

以上为一个简单的grunt以及插件下载

gruntfile结构

wrapper函数

所写代码必须放在此函数内

module.exports = function(grunt){

}

task,target,option,

target为task的目标，，而具体行为有option决定。

task

grunt [taskName]

默认会运行task下所有target。

grunt [taskName]:[targetName]

运行task下指定target

直接输入Grunt会执行default的task

task可以多个组合

一些常用task

<!-- 文件拷贝 -->

npm install grunt-contrib-copy --save-dev

<!-- 文件删除 -->

npm install grunt-contrib-clean --save-dev