gulp使用——将js、css引入index.html中(以wiredep为例)

原创性声明：本文完全为笔者原创，请尊重笔者劳动力。转载务必注明原文地址。

wiredep是一个gulp插件，能够将js、css文件自动插入到html中。它属于inject相关插件，这一类插件的功能就是如此。gulp使用的步骤如下：

1.首先，在项目根目录下创建一个文件package.json ，内容如下：

{
  "name": "demo",
  "version": "0.1.0-SNAPSHOT",
  "description": "spring-boot and angularJS",
  "private": true,
  "dependencies": {},
  "devDependencies": { //项目需要依赖的前端插件(注意：拷贝进去时这段注释要删掉)
    "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进入项目根目录，运行命令npm install，它将把package.json中声明的依赖插件都down下来，并在项目根目录下生成文件夹node_modules,并将插件保存在其中。

3.在项目根目录下创建一个文件gulpfile.js，内容如下：

"use strict";

var gulp = require('gulp'), //将上面down下来的插件都要引入，以便需要
    gutil = require('gulp-util'),
    wiredep = require('wiredep').stream

gulp.task('html', function() {  // 创建task任务:可以在cmd命令中执行任务
  gulp.src('src/main/webapp/index.html')
    .pipe(wiredep({  // 调用插件wiredep执行方法
      optional: 'configuration',
      goes: 'here'
    }))
    .pipe(gulp.dest('src/main/webapp'))
})

4.接着在项目根目录下创建一个文件:.bowerrc,创建完毕后在IDE中会被隐藏。文件内容如下:

{
  "directory" : "src/main/webapp/bower_components"
}

显而易见，这个文件的作用是指定bower install时，下载的angularJS等插件存放的目录位置。如果没有这个文件，那么通过bower命令下载的插件将会被保存在项目根目录下。

5.在项目根目录下创建文件:bower.json，内容如下:

{
  "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时将会下载的插件，具体作用自行百度（拷贝进去时这段注释要删掉）
    "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"
  }
}

显然，指定一会儿bower install时需要下载哪些插件。

6.cmd进入项目根目录下：执行bower install。安装完成后，将在第4步指定的目录下出现这些插件。接着执行下一步。
7.接下来并不是执行之前在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的注释必不可少，他将取决执行htmltask任务后，将bower install下载的插件引入到index.html中的哪个位置。

7.最后一步，cmd进入项目根目录下执行gulp html以便执行htmltask命令，打开index.html，便会发现，bower_components下的插件都被自动引入到指定的位置中了。如下：

<!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.关于gulp的更多使用，请参见官方内容或者笔者收藏的页面:Gulp：任务自动管理工具 和Gulp入门教程。
2.关于wiredep的详细内容，参见wiredep。
3.更多bower相关内容，参见bower 官网。

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容

  • gulp开发教程
    对网站资源进行优化，并使用不同浏览器测试并不是网站设计过程中最有意思的部分，但是这个过程中的很多重复的任务能够使用...
    懵逼js阅读 1,101评论 0赞 8
  • gulp使用以及按照方式
    1、gulp的安装 首先确保你已经正确安装了nodejs环境。然后以全局方式安装gulp： npm install...
    F_imok阅读 2,409评论 1赞 11
  • mean开发系列工具篇之gulp
    前言 本文默认你已经安装好node环境，并且熟悉node命令，和window cd命令。 gulp简介 基于nod...
    9I阅读 1,998评论 4赞 50
  • gulp构建工具
    gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学...
    依依玖玥阅读 3,200评论 7赞 55
  • 前端构建工具gulpjs的使用介绍及技巧
    gulpjs是一个前端构建工具，与gruntjs相比，gulpjs无需写一大堆繁杂的配置参数，API也非常简单，学...
    井皮皮阅读 1,328评论 0赞 10