一、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。