yeoman&bower

一、Yeoman

在nodejs环境下安装：

npm install -g yo

然后安装所需要的generator,generator是npm包，命名为generator-xyz,比如安装angular的generator时

npm install -g generator-angular

然后进入你想要创建项目的目录下，运行

yo angular learnangular

learnangular是项目名

选择是否使用sass,bootstrap，勾选（使用空格键选中和取消选中）需要的angular文件，回车即创建所需的项目文件。

最后运行下载所有所需依赖的模块

npm install

现在项目就构建好了，解释下每个文件的作用：

1）app是我们写正式代码的文件

2）node_modules 是自动下载的所需项目文件

3）test文件夹用于自动化测试

4）.bowerrc 是bower自身的配置项，包括线上的项目拉下来后存放的路径

5）.editorconfig 指定代码风格

6）.gitattributes git的配置项

7）.gitignore 当前项目要忽略哪些文件不上传到git

8）.jscsrc

9）.jshintrc jshint配置文件

10）.yo-rc.json

11）bower.json bower的配置文件，指定通过bower去拉哪些前端框架或者配置文件

12）Gruntfile.js grunt的配置文件

13）package.json

二、Bower

bower是web的包管理器。

安装：

npm install -g bower

查看版本

bower -v

如果现在有个项目需要使用到bootstrap和jquery，按照平常的做法就是去网上把jquery和bootstrap下载下来，使用bower就可以不用自己去下载了，直接进入到项目目录，使用如下指令，bower会自动去github上下载最新版本的模块，运行在git bash下

bower install bootstrap
bower install jquery

下载下来的文件会存放在当前目录下的bower_components文件夹下。

问题：

1）如果我们需要的组件比较小众，没有在bower上注册，那么直接使用名字安装，bower可能查找不到， 因此bower提供了几种安装方式(进入到项目目录，shifrt+右键选择git bash，再运行相应的命令)：

• 通过github的短写安装

找到你需要下载的组件的github地址，比如jquery，打开github官网

假设现在要使用的是esprima，打开esprima，

其中的jquery/esprima就是github短写，使用如下命令安装

bower install jquery/esprima

• 项目完整的github地址

进入github，点击wiki，复制clone this wiki locally的地址，即蓝色选中部分

复制下来的地址是：https://github.com/jquery/esprima.wiki.git，去掉.wiki

bower install https://github.com/jquery/esprima.git

2）使用的组件没有在github上，可以直接使用URL进行安装

生成bower.json文件

当项目提交到线上，其他成员需要将项目代码拉下来时，可以直接运行一下指令，就可以下载bower.json文件中所需要的依赖项，因此bower.json文件很重要

bower install

1）首先运行(不能在git bash中运行，可以在cmd中运行)

bower init

name: 输入项目名称

description：输入项目描述

main file:主要入口文件

keywords:关键字

设置当前安装的组件作为dependecies；一路下来基本上都是yes，然后就会显示给你看bower.json文件预览

现在就生成了bower.json

2）修改bower.json文件(在git bash中)

比如我现在想要在devdependencies里面引入angular

bower install angular --save-dev

上面的命令意思是安装angular，并且保存在devdependencies中

如果我想在dependencies中也引入angular的话，可以运行下面的命令

bower install angular --save

Note:

使用vim bower.json可以查看bower.json文件，输入:wq可以退出查看模式

bower.json文件中

"dependencies": {
    "bootstrap": "^3.3.7",
    "esprima": "https://github.com/jquery/esprima.git#^3.1.1",
    "angular": "^1.5.8"
  },

版本号前面可以使用^或者~

^：如果bootstrap版本从3.3.7升到3.3.8或者3.5.4，都会自动改变，但是如果从3.3.7升到了4.x.x的话就不会自动改变

~: 如果bootstrap版本从3.3.7升到3.3.9可以自动改变，但是如果从3.3.7升级到3.4.x则不会自动改变

配置.bowerrc文件

{
  "directory": "bower_components", // 配置文件路径
  "proxy":"http://proxy.tencent.com:8080", // 配置代理（腾讯）
  "https-proxy":"https://proxy.tencent.com:8080", // 配置https代理
  "timeout":60000 // 配置过期时间
}

因为很多公司为了内网的安全，都必须使用代理才能访问外网，因此bower也需要配置代理才能在外网下载所需的依赖项。timeout是过期时间，如果网络很好可以将过期时间调小一点，如果网络很差可以将过期时间调大一点，默认单位为ms。