Bower是一個客戶端技術的軟件包管理器，它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。
詳細信息請參考 bower官網 。
幾個例子：
1.當前項目需要引入jquery
bower install jquery
只需上面簡單一條命令就可以將jquery庫已經其依賴的庫下載下來。直接就可以在項目中引用相關的文件就可以了。
2.使用bower.json
{
"name": "bower demo",
"version": "2.9.0",
"homepage": "",
"authors": [
"xiaopeng <[email protected]>"
],
"description": "bower.json test project",
"keywords": [
"test"
],
"license": "MIT",
"ignore": [
"node_modules",
"bower_components",
"test",
"tests"
],
"dependencies": {
"jquery": "~2.1.0",
"angular": "~1.3.15",
"angular-animate": "~1.3.15",
"angular-ui-router": "~0.2.12",
"ui-router-extras": "~0.0.13",
"angular-bootstrap": "~0.13.0",
"ngInfiniteScroll": "~1.2.0"
}
}
將bower.json文件放入項目的根目錄中，在項目根目錄中運行 bower install 就可以直接將項目所需要的前端庫，直接下載下來。
bower解決了前端庫及其依賴安裝的問題。至於怎麼把真正所需要的文件引入到html文件中，就需要wiredep來幫忙啦。
詳情參考 wiredep項目主頁
html文件(index.html)
<html>
<head>
<!-- bower:css -->
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<!-- endbower -->
</body>
</html>
gulp.js
var wiredep = require('wiredep').stream;
gulp.task('bower', function () {
gulp.src('./index.html')
.pipe(wiredep({
optional: 'configuration',
goes: 'here'
}))
.pipe(gulp.dest('./'));
});
在命令行運行 gulp bower 就可以將所需庫的js、css文件直接引入到html文件中。
bower解決了前端庫依賴管理的痛點，而wiredep解決了bower前端庫引入進html的問題。
參考： bower官網 、 wiredep項目主頁