摘要: 一直以來npm,pip等各類包管理器好像都和前端開發沒什麼太大關係,固然由於nodejs的緣由可能感受npm會親切一些,不過終歸不是針對客戶端的包管理工做,因此Bower的出現確實讓人眼前一亮.css
最近看到一個專門針對前端的包管理工具Bower,它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。實際上angularjs的種子項目就是用它的,看到了嗎,它是專門針對客戶端資源的,也就是說它管理的基本上都是前端工程師使用的東東.前端
Bower是用於web前端開發的包管理器。對於前端包管理方面的問題,它提供了一套通用、客觀的解決方案。它經過一個API暴露包之間的依賴模型,這樣更利於使用更合適的構建工具。Bower沒有系統級的依賴,在不一樣app之間也不互相依賴,依賴樹是扁平的。node
Bower運行在Git之上,它將全部包都視做一個黑盒子。任何類型的資源文件均可以打包爲一個模塊,而且可使用任何規範(例如:AMD、CommonJS等)。jquery
介紹完了Bower說一下它能給咱們帶來什麼好處?nginx
1. 節省時間。爲何要學習Bower的第一個緣由,就是它會爲你節省尋找客戶端的依賴關係的時間。每次我須要安裝jQuery的時候,我都須要去jQuery網站下載包或使用CDN版本。可是有了Bower,你只須要輸入一個命令,jquery就會安裝在本地計算機上,你不須要去記版本號之類的東西,你也能夠經過Bower的info命令去查看任意庫的信息。angularjs
2. 脫機工做。Bower會在用戶主目錄下建立一個.bower的文件夾,這個文件夾會下載全部的資源、並安裝一個軟件包使它們能夠離線使用。若是你熟悉Java,Bower便是一個相似於如今流行的Maven構建系統的.m2倉庫。每次你下載任何資源庫都將被安裝在兩個文件夾中 —— 一個在的應用程序文件夾,另外一個在用戶主目錄下的.bower文件夾。所以,下一次你須要這個倉庫時,就會用那個用戶主目錄下.bower中的版本。web
3. 能夠很容易地展示客戶端的依賴關係。你能夠建立一個名爲bower.json的文件,在這個文件裏你能夠指定全部客戶端的依賴關係,任什麼時候候你須要弄清楚你正在使用哪些庫,你能夠參考這個文件。sql
4. 讓升級變得簡單。假設某個庫的新版本發佈了一個重要的安全修補程序,爲了安裝新版本,你只須要運行一個命令,bower會自動更新全部有關新版本的依賴關係。npm
安裝Bowerjson
Bower依賴Node 和 npm。經過npm 安裝到全局環境中:
npm install -g bower
使用
安裝以後,能夠經過bower help命令能夠獲取更多幫助信息。瞭解了這些 信息就能夠開始了。
安裝包以及其依賴的包
# Using the dependencies listed in the current directory's bower.json bower install # Using a local or remote package bower install <package> # Using a specific Git-tagged version from a remote package bower install <package>#<version>
全部包都將默認安裝到components目錄中。 不建議直接修改此目錄中的內容。
執行bower list命令能夠列出全部本地安裝的包。
若是你不是在建立一個被其餘人使用的包(也就是說,你在構建本身的web應用), 那就應當將全部的已經安裝的包歸入源碼管理中。
查找包
bower search [<name>]
使用包
作簡單的使用方式就是經過script 標籤直接引入已經安裝的包:
<script src="/bower_components/jquery/index.js"></script>
對於更復雜的項目,你可能更但願合併全部腳本或者使用模塊加載器(module loader)。 Bower只是一個包管理器,不過你可使用不少其餘工具 -- 例如 Sprockets 和 RequireJS -- 這些都能幫你完成你所但願的工做。
卸載包
bower uninstall <package-name>
配置Bower.json
首先,必須在項目的根目錄下建立一個JSON文件 -- 默認是bower.json,而後指定全部的依賴。這和 Node所使用的package.json文件或者Ruby中的Gemfile文件很相似,而且有助於鎖定項目的依賴關係。
還能夠經過如下命令,進入交互式界面建立一個bower.json文件:
bower init
文件定義了幾個參數:
name (required): The name of your package. version: A semantic version number (see semver). main [string|array]: The primary endpoints of your package. ignore [array]: An array of paths not needed in production that you want Bower to ignore when installing your package. dependencies [hash]: Packages your package depends upon in production. devDependencies [hash]: Development dependencies. { "name": "my-project", "version": "1.0.0", "main": "path/to/main.css", "ignore": [ ".jshintrc", "**/*.txt" ], "dependencies": { "<name>": "<version>", "<name>": "<folder>", "<name>": "<package>" }, "devDependencies": { "<test-framework-name>": "<version>" } }
更多內容能夠去看看官網http://bower.io/