## 前言 前端如何进行资源的统一依赖一直是我们前端工程化的一个重大问题，在我们初步的技术实践中，我们采用了bower作为所有前端项目资源依赖的框架。不再使用复古的复制粘贴资源，这样既可以维护前端资源，又可以实现对项目依赖资源版本的管理，便于项目维护和升级。 ## 快速入手 * [bower官网](https://bower.io/) * 优点：项目依赖安装，可以固定资源文件，支持资源版本升级，可以支持缓存安装等 * 全局安装bower ``` bash $ npm install -g bower ``` * 项目依赖安装 ``` bash $ npm install --save-dev bower ``` * 本地资源资源依赖配置初始化 ``` bash $ bower init ``` * 资源加载,默认安装在bower_components ``` bash #项目安装指定资源 $ bower install [name] --save-dev #项目安装依赖资源 $ bower install --save-dev #查看资源详情 $ bower info [name] #搜索资源 $ bower search [name] ``` * 如果需要修改bower默认安装路径，可以在根目录下追加.bowerrc 文件，指定目录，格式如下： ``` bash {"directory" : "libs"} ``` * bower支持的安装方式(后面几种是比较建议的方式，如果本地已有对应的资源或者资源积累，可以通过依赖一步安装实现。 ~~~ #registered package 包名 $ bower install jquery #GitHub shorthand（github的短地址） $ bower install desandro/masonry #Git endpoint git的地址 $ bower install git://github.com/user/package.git #URL，支持css js taz zip $ bower install http://example.com/script.js #local，本地资源目录 ,更喜欢本地文件的可以用这个，也可以参考bower的缓存文件目录（以文件夹的方式引入到comp中,文件夹理解为一个资源） $ bower install my/local/folder/ #local，本地资源目录文件，也可以参考bower的缓存文件目录（以文件夹的方式引入到comp中,文件名为文件夹名，加index） $ bower install my/local/folder/file ~~~ ## 发布与删除资源 ``` bash # 发布资源,需要注意的是资源必须发布一个版本才可以监测到对应的资源版本提供下载。 $ bower register <my-package-name> <git-endpoint> # for example $ bower register example git://github.com/user/example.git # 删除资源 ,删除资源需要登录（github），需要你是这个资源的owner # cmd窗口操作 bower login ? Username csnikey ? Password ******** bower EAUTH Logged in as csnikey $ bower unregister <my-package-name> bower Package unregistered zj-boot ``` ## 资源使用 资源发布之后如何使用取决于用户，我们推荐你用bower and 其他工具一起使用，比如grunt \gulp\requirejs 等，为此可以查看官方使用的[api文档](https://bower.io/docs/api/) ### gulp集成bower * bower拓展性很好，支持建立为gulp任务 ``` javascript //安装资源，可以指定安装之后的目录，可以指定资源集合 var　bower=require("bower"); gulp.task("gulpbower",function(){ return bower({ directory: './my_bower_components', cwd: './app' }) .pipe(gulp.dest("lib")); }) //获取资源的主文件 var mainBowerFiles=require("main-bower-files"); //吧下载的前端模块的主文件加载到lib当中 ,如何配置获取压缩版本的主文件？只获取主文件，不同项目需要的文件可以手动配置 gulp.task("bowerfiles",function(){ return gulp.src(mainBowerFiles({ paths:"", group:"basic" })) .pipe(gulp.dest("lib")); }) ```