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

yeoman&bower的更多相关文章

  1. Yeoman+Bower+gulp web前端自动化工作流程(初级教程)

    Yeoman包括了三个部分yo(脚手架工具).grunt/gulp(构建工具).bower(包管理器).听说gulp更容易上手,所以我就没用grunt而选的gulp 什么是开发流程? 在我看来一个完整 ...

  2. yeoman bower grunt等安装

    grunt-beginner前端自动化工具:http://www.imooc.com/learn/30 grunt的安装 官方站点:http://gruntjs.com/ 安装指令: sudo npm ...

  3. 前端自动化学习笔记(一)——Yeoman,bower,Grunt的安装

    最近看视频学习了前端自动化的一些知识,确实让我大开眼界.感觉前端越来越神器了.同时跟着视频自己也尝试运用了一些工具去构建前端项目,但是中间遇见了很多坑,磕磕绊绊的才实现了一点功能,所以打算记录一下学习 ...

  4. node,Yeoman,Bower,Grunt的简介及安装

    作为前端,基本的html,css,js已经不太够用了,所以要学习一些前端自动化工具,来提高我们的生产力 1.NodeJS 先安装NodeJS,直接去官网,下载最新的版本,一定要最新的版本,这样会避免很 ...

  5. windows下前端开发工具遇到的问题总结(yeoman bower grunt)

    我用的是windows环境 一毕要环境: 1:nodejs 官网:https://nodejs.org/en/ 2:由于很多国外网站国内都访问不了(如果没有设置会出现很多奇怪的错误),所有必需FQ 我 ...

  6. 前端工程化开发之yeoman、bower、grunt

    上两遍文章介绍了前端模块化开发(以seaJs为例)和前端自动化开发(以grunt为例)的流程,参见: http://www.cnblogs.com/luozhihao/p/4818782.html ( ...

  7. Yeoman

    安装Yeoman之前,确认安装好Node.js和npm. sudo npm install --global yo 然后查看软件版本 yo --version && bower --v ...

  8. 使用Yeoman搭建 AngularJS 应用 (3) —— 让我们搭建一个网页应用

    原文地址:http://yeoman.io/codelab/setup.html 与Yeoman的交互大多数是通过命令行.在苹果机器需要使用Terminal应用,在Linux使用shell.如果使用W ...

  9. 初识yeoman

    最近开始新项目,在项目构建上面寻找合适的东西,grunt,bower到发现yeoman;学习了下,把一些东西记录下来然留着以后用. 1.什么是Yeoman Yeoman是Google的团队和外部贡献者 ...

随机推荐

  1. WCF 服务

    1.代码 using System; using System.Collections.Generic; using System.Linq; using System.Runtime.Seriali ...

  2. 关于本地文件请求json文件

    因为需要用到json数据格式,上网查了一下例子之后我就想本地测试一下看能不能成功. 结果,chrome下没有任何反应,打开控制台之后报错如下: XMLHttpRequest cannot load f ...

  3. 注解1 --- JDK内置的三个基本注解 --- 技术搬运工(尚硅谷)

    @Override: 限定重写父类方法, 该注解只能用于方法 @Deprecated: 用于表示所修饰的元素(类, 方法等)已过时.通常是因为所修饰的结构危险或存在更好的选择 @SuppressWar ...

  4. python 匹配集合与补集

  5. 洛谷 P1948 [USACO08JAN]电话线Telephone Lines 最短路+二分答案

    目录 题面 题目链接 题目描述 输入输出格式 输入格式 输出格式 输入输出样例 输入样例 输出样例 说明 思路 AC代码 题面 题目链接 P1948 [USACO08JAN]电话线Telephone ...

  6. 修正Thinkphp 3.2 分页Page类以支持URL路由

    http://www.thinkphp.cn/topic/22114.html 最终目的实现以http://www.fl900.com/product/lists/1-0-0-1.html这样的URL ...

  7. iOS 停止不必要的UI动效设计

    http://www.cocoachina.com/design/20151124/14400.html 前言:这篇短文将会探讨UI设计中动画的过度使用,并将其与早期的视觉设计进行对比,提出一些对于有 ...

  8. mongodb的一些简单操作

    mongo 使用 mongod 开机mongod --dbpath c:\mongo mongod --storageEngine mmapv1 --dbpath c:\mongo mongoimpo ...

  9. 如何在“代码”视图中工作并充分利用 Dreamweaver 的编码功能。如 Emmet 缩写

    可通过多种方式在 Dreamweaver 中处理代码. 您可以使用“新建文档”对话框打开新的代码文件,然后开始键入您的代码. 在 Dreamweaver 中创建新的代码文件 键入时,会显示代码提示以帮 ...

  10. Best Time to Sell and Buy Stock

    这道题想了很多,但是想多了.这个题思路很简单,如果当前值大于最小值,就计算差,和最大利润值比较. class Solution { public: int maxProfit(vector<in ...