## 前言 前端如何進行資源的統一依賴一直是我們前端工程化的一個重大問題，在我們初步的技術實踐中，我們采用了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")); }) ```