Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,他可以很好的帮助你帮你解决js的依赖管理,比如jquery angular bootstrap 等等。

可以很方便的对这些包进行下载升级删除等等。

下面与大家分享下自己简单学到的知识。

以下都是基于windows用户。

1、安装node

 bower插件是通过npm, Node.js包管理器安装和管理的

 所以要先安装nodejs,新版nodey已经集成安装npm了,所以我们可以直接使用npm   node-v0.10.29-x64.msi 提取码:kj9b

2、 安装 msysgit

  点我下载

 具体安装就不讲了 网上有很多。

2、安装bower

  在cmd 下 全局安装bower

npm install -g bower

3、在项目目录运行

npm install --save-dev bower

4、生成bower.json 配置文件

如果你的项目有很多依赖,你总不想每次都一个个的重新安装吧? 这样我们就需要用到 bower.json配置文件了,所有依赖都会记录在里面,这样生成,如图一步步完成

bower init

5、安装依赖包

这时我们已经可以安装依赖包了,我们先安装个jquery和bootstrap

bower install --save-dev jquery bootstrap

这时你会突然发现出错了,[ENOGIT git is not installed or not in the PATH]

别着急这是因为前面安装的msysgit 没有写到环境变量里,我们这样解决:

假如你的git安装目录是"C:\Program Files (x86)\Git",在path中加入git的bin和cmd目录,如C:\Program Files (x86)\Git\bin;C:\Camnpr\Program Files (x86)\Git\cmd

如果这个方法不起作用是因为,你修改的path没有生效, 你需要重新启动电脑,有一个方法不需要重启电脑就立马生效,很好用,看下面

在cmd中输入下面代码 并回车 然后关闭cmd窗口。

path PATH=xxxx

在你的项目文件夹重新打开cmd窗口,继续运行安装依赖包的代码

这时你会发现 哇塞 下载下来了!路径是什么?你会发现下载到一个叫bower_components的文件夹去了,这个有点。。好尴尬啊~

能不能改路径呢?能!这样做

在项目根下创建一个名为.bowerrc 的文件,内容为(目录为项目根目录 ./lib/)

{
  "directory" : "lib"
}

你肯定怀疑我是怎么建立的无名文件。。 - _ -

在项目根目录的cmd中输入并回车。去看文件夹 文件出来了,别谢我,我叫红领巾!

type null > .bowerrc

我们继续。。。。

把前面下载的手动删掉,再重新

bower install

这次为什么后面没有跟着 jquery啊? 因为前面已经写入bower.json了呀!知道配置文件的好处了吧?

到此位置安装完成哦。

6、使用

我想能来看这篇文章的同学都应该知道一个js文件如何引用了吧?

可是目录结构。。。看图(看不懂别打我啊 我躲。。)

你应该会问 这目录这么多文件,真正上线的时候咋办?

其实这个问题嘛!这个和gulp就又挂上勾了,要在gulp里对其进行选择性编译哇。哇卡卡。

好啦 就到这里啦~ 有问题随时沟通交流  大家一起进步

前端开发bower包管理器的更多相关文章

  1. Bower => 前端开发也有包管理器

    摘要: 一直以来npm,pip等各种包管理器好像都和前端开发没什么太大关系,当然因为nodejs的原因可能感觉npm会亲切一些,不过终归不是针对客户端的包管理工作,所以Bower的出现确实让人眼前一亮 ...

  2. 【转】npm包管理器那些事

    原文链接:http://www.cnblogs.com/shuoer/p/7782125.html npm包管理器那些事! 今天和朋友针对npm包全局安装和本地项目安装这个梗展开的激烈的讨论,故此做一 ...

  3. Bower前端包管理器

    bower 前端包管理器 为什么要用它 一个新的web项目开始,我们总是很自然地去下载需要用到的js类库文件,比如jQuery.随着项目的进展,我们可能又需要Bootstrap3,其中每个框架之间的依 ...

  4. 包管理器Bower使用手冊之中的一个

    包管理器Bower使用手冊之中的一个 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.Bower介绍 Bower是一个适合Web应用的包管理器,它擅长 ...

  5. 包管理器Bower使用手册之一

    包管理器Bower使用手册之一 作者:chszs,转载需注明.博客主页:http://blog.csdn.net/chszs 一.Bower介绍 Bower是一个适合Web应用的包管理器,它擅长前端的 ...

  6. NET Core 静态文件及JS包管理器(npm, Bower)的使用

    NET Core 静态文件及JS包管理器(npm, Bower)的使用 文章目录 在 ASP.NET Core 中添加静态文件 使用npm管理JavaScript包 使用Bower管理JavaScri ...

  7. 【转】包管理器Bower详细讲解

      包管理器Bower   今天自己用Angular写东西的时候,下载了Angular-seed项目,发现需要用到bower,之前也使用过,没有仔细了解,今天趁机了解到一些. bower的官网地址:  ...

  8. 使用Bower作为Web包管理器

    Bower是一个简单易用的Web包管理器,通过它我们可以非常简便的安装各种Web框架和库,同时它也负责管理不同包之间的关系依赖. 安装Bower Bower需要 npm 和 Git 的支持,在安装Bo ...

  9. Node.js包管理器Yarn的入门介绍与安装

    FAST, RELIABLE, AND SECURE DEPENDENCY MANAGEMENT. 就在昨天, Facebook 发布了新的 node.js 包管理器 Yarn 用以替代 npm .咱 ...

随机推荐

  1. Quartz 2D在ios中的使用简述一:坐标体系

    Quartz 2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境,官方文档:Quartz 2D Programming Guide. 一.坐标体系 这样的坐标体系就导致我们使用Quart ...

  2. PHP如何连接MySQL数据库

    * PHP连接MySQL数据库 * 准备工作 * 在XAMPP软件的安装目录/php/ext目录中 * php_mysql.dll和php_mysqli.dll文件必须存在 * 在XAMPP软件的安装 ...

  3. UVA - 1025 A Spy in the Metro[DP DAG]

    UVA - 1025 A Spy in the Metro Secret agent Maria was sent to Algorithms City to carry out an especia ...

  4. Android--数据解析

    一.XML解析: 1.Pull 解析方式: 1)先获取到一个 XmlPullParserFactory 的实例, 并借助这个实例得到 XmlPullParser 对象: 2)调用 XmlPullPar ...

  5. [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之材质了解Materials

    [我给Unity官方视频教程做中文字幕]beginner Graphics – Lessons系列之材质了解Materials 既上一篇分享了中文字幕的灯光介绍Lights后,本篇分享一下第3个已完工 ...

  6. 【BZOJ-3910】火车 倍增LCA + 并查集

    3910: 火车 Time Limit: 20 Sec  Memory Limit: 512 MBSubmit: 262  Solved: 90[Submit][Status][Discuss] De ...

  7. 设置CentOS6.5时钟同步

    一.测试ntp服务 # rpm -q ntp ntp-4.2.4p8-2.el6.x86_64 // 这表示已安装了,如果没有安装,这是空白. 二./etc/ntp.conf 红色部分是修改的. 配置 ...

  8. 如何配置virtualBox端口转发

    1,第一步登陆虚拟主机,安装openssh-server(这一步非常重要,如果不安装,你在宿主机上怎么链接都是连不上的,我当时就犯了这个错误) apt-get install openssh-serv ...

  9. [Effective JavaScript 笔记]第22条:使用arguments创建可变参数的函数

    第21条讲述使用可变参数的函数average.该函数可处理任意数量的参数并返回这些参数的平均值. 如何创建可变参数的函数 1.实现固定元数的函数 书上的版本 function averageOfArr ...

  10. c语言数据结构:递归的替代-------回溯算法

    1.要理解回溯就必须清楚递归的定义和过程. 递归算法的非递归形式可采用回溯算法.主要考虑的问题在于: 怎样算完整的一轮操作. 执行的操作过程中怎样保存当前的状态以确保以后回溯访问. 怎样返回至上一次未 ...