原創(chuàng)性聲明：本文完全為筆者原創(chuàng)，請(qǐng)尊重筆者勞動(dòng)力。轉(zhuǎn)載務(wù)必注明原文地址。
wiredep是一個(gè)gulp插件，能夠?qū)s、css文件自動(dòng)插入到html中。它屬于inject相關(guān)插件，這一類插件的功能就是如此。gulp使用的步驟如下：
1.首先，在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件package.json ，內(nèi)容如下：
{
"name": "demo",
"version": "0.1.0-SNAPSHOT",
"description": "spring-boot and angularJS",
"private": true,
"dependencies": {},
"devDependencies": { //項(xiàng)目需要依賴的前端插件(注意：拷貝進(jìn)去時(shí)這段注釋要?jiǎng)h掉)
"gulp": "^3.9.0",
"gulp-util": "^3.0.7",
"gulp-cssnano": "^2.1.0",
"gulp-htmlmin": "^1.3.0",
"gulp-imagemin": "^2.4.0",
"gulp-uglify": "^1.5.1",
"gulp-filter": "^3.0.1",
"gulp-replace": "^0.5.4",
"gulp-useref": "^3.0.5",
"gulp-autoprefixer": "^3.1.0",
"gulp-ng-annotate": "^1.1.0",
"gulp-sass": "^2.1.1",
"gulp-rev": "^6.0.1",
"gulp-rev-replace": "^0.4.3",
"gulp-flatten": "^0.2.0",
"gulp-jshint": "^2.0.0",
"gulp-htmlhint": "^0.3.1",
"jshint-stylish": "^2.1.0",
"htmlhint-stylish": "^1.0.3",
"wiredep": "^3.0.0",
"browser-sync": "^2.11.1",
"del": "^2.2.0",
"http-proxy-middleware": "^0.9.1"
}
}
2.其次，cmd進(jìn)入項(xiàng)目根目錄，運(yùn)行命令npm install，它將把package.json中聲明的依賴插件都down下來(lái)，并在項(xiàng)目根目錄下生成文件夾node_modules,并將插件保存在其中。
3.在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件gulpfile.js，內(nèi)容如下：
"use strict";
var gulp = require('gulp'), //將上面down下來(lái)的插件都要引入，以便需要
gutil = require('gulp-util'),
wiredep = require('wiredep').stream
gulp.task('html', function() { // 創(chuàng)建task任務(wù):可以在cmd命令中執(zhí)行任務(wù)
gulp.src('src/main/webapp/index.html')
.pipe(wiredep({ // 調(diào)用插件wiredep執(zhí)行方法
optional: 'configuration',
goes: 'here'
}))
.pipe(gulp.dest('src/main/webapp'))
})
4.接著在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件:.bowerrc,創(chuàng)建完畢后在IDE中會(huì)被隱藏。文件內(nèi)容如下:
{
"directory" : "src/main/webapp/bower_components"
}
顯而易見，這個(gè)文件的作用是指定bower install時(shí)，下載的angularJS等插件存放的目錄位置。如果沒有這個(gè)文件，那么通過(guò)bower命令下載的插件將會(huì)被保存在項(xiàng)目根目錄下。
5.在項(xiàng)目根目錄下創(chuàng)建文件:bower.json，內(nèi)容如下:
{
"name": "demo",
"description": "spring-boot and angularJS",
"version": "0.1.0-SNAPSHOT",
"keywords": [
"the first project of spring-boot and angularJS"
],
"private": true,
"ignore": [
"**/.*",
"node_modules",
"src/main/webapp/bower_components",
"src/main/webapp/lib",
"src/main/java",
"src/main/resources",
"src/test",
"target"
],
"dependencies": { //依賴的插件，bower install時(shí)將會(huì)下載的插件，具體作用自行百度（拷貝進(jìn)去時(shí)這段注釋要?jiǎng)h掉）
"angular": "1.5.5",
"angular-resource": "1.5.5",
"angular-cookies": "1.5.5",
"angular-messages": "1.5.5",
"angular-animate": "1.5.5",
"angular-sanitize": "1.5.5",
"angular-aria": "1.5.5",
"angular-route": "1.5.5",
"angular-i18n": "1.5.5",
"angular-material": "1.0.4",
"angular-ui-router": "0.2.15",
"angular-ui-validate": "1.2.2",
"codemirror": "5.14.2",
"angular-ui-codemirror": "0.3.0",
"angular-loading-bar": "0.9.0",
"angular-local-storage": "0.2.7",
"angular-material-data-table": "0.10.9",
"angular-once": "0.1.9",
"moment": "2.10.6",
"angular-moment": "1.0.0-beta.3",
"Chart.js": "1.0.2",
"angular-chart.js": "0.8.8",
"angular-filter": "0.5.8",
"ng-file-upload": "^12.0.4",
"editor.md": "1.5.0",
"jquery": "3.1.0"
},
"devDependencies": {
"angular-mocks": "1.5.5",
"angular-scenario": "1.5.5"
},
"resolutions": {
"angular": "1.5.5",
"Chart.js": "1.0.2",
"moment": "2.10.6"
}
}
顯然，指定一會(huì)兒bower install時(shí)需要下載哪些插件。
6.cmd進(jìn)入項(xiàng)目根目錄下：執(zhí)行bower install。安裝完成后，將在第4步指定的目錄下出現(xiàn)這些插件。接著執(zhí)行下一步。
7.接下來(lái)并不是執(zhí)行之前在gulpfile.js中定義的html task命令，而要先再index.html中添加如下代碼:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>first project of angularJS and spring-boot</title>
<!-- bower:css --> // 1
<!-- endbower --> // 2
</head>
<body ng-app>
<!-- bower:js --> // 3
<!-- endbower --> //4
</body>
</html>
添加1、2、3、4的注釋必不可少，他將取決執(zhí)行htmltask任務(wù)后，將bower install下載的插件引入到index.html中的哪個(gè)位置。
7.最后一步，cmd進(jìn)入項(xiàng)目根目錄下執(zhí)行gulp html以便執(zhí)行htmltask命令，打開index.html，便會(huì)發(fā)現(xiàn)，bower_components下的插件都被自動(dòng)引入到指定的位置中了。如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- bower:css -->
<link rel="stylesheet" href="bower_components/angular-material/angular-material.css" />
<link rel="stylesheet" href="bower_components/codemirror/lib/codemirror.css" />
<link rel="stylesheet" href="bower_components/angular-loading-bar/build/loading-bar.css" />
<link rel="stylesheet" href="bower_components/angular-material-data-table/dist/md-data-table.css" />
<link rel="stylesheet" href="bower_components/angular-chart.js/dist/angular-chart.css" />
<!-- endbower -->
</head>
<body>
<!-- bower:js -->
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/angular-resource/angular-resource.js"></script>
<script src="bower_components/angular-cookies/angular-cookies.js"></script>
<script src="bower_components/angular-messages/angular-messages.js"></script>
<script src="bower_components/angular-animate/angular-animate.js"></script>
<script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
<script src="bower_components/angular-aria/angular-aria.js"></script>
<script src="bower_components/angular-route/angular-route.js"></script>
<script src="bower_components/angular-material/angular-material.js"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.js"></script>
<script src="bower_components/angular-ui-validate/dist/validate.js"></script>
<script src="bower_components/codemirror/lib/codemirror.js"></script>
<script src="bower_components/angular-ui-codemirror/ui-codemirror.js"></script>
<script src="bower_components/angular-loading-bar/build/loading-bar.js"></script>
<script src="bower_components/angular-local-storage/dist/angular-local-storage.js"></script>
<script src="bower_components/angular-material-data-table/dist/md-data-table.js"></script>
<script src="bower_components/angular-once/once.js"></script>
<script src="bower_components/moment/moment.js"></script>
<script src="bower_components/angular-moment/angular-moment.js"></script>
<script src="bower_components/Chart.js/Chart.js"></script>
<script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
<script src="bower_components/angular-filter/dist/angular-filter.min.js"></script>
<script src="bower_components/ng-file-upload/ng-file-upload.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbower -->
</body>
</html>
1.關(guān)于gulp的更多使用，請(qǐng)參見官方內(nèi)容或者筆者收藏的頁(yè)面:Gulp：任務(wù)自動(dòng)管理工具 和Gulp入門教程。
2.關(guān)于wiredep的詳細(xì)內(nèi)容，參見wiredep。
3.更多bower相關(guān)內(nèi)容，參見bower 官網(wǎng)。
