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

最新推荐文章于 2021-06-21 18:50:34 发布
最新推荐文章于 2021-06-21 18:50:34 发布
阅读量4.6k 收藏
点赞数

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 官网。



文／东方一号蓝（简书作者）
原文链接：http://www.jianshu.com/p/ba7ea853166d
著作权归作者所有，转载请联系作者获得授权，并标注“简书作者”。
00u0o
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
gulp-js2css:使用 js2css 将 JS 预处理为 CSS
06-03
使用 js2css 将 JS 预处理为 CSS 安装 $ npm install --save-dev gulp-js2css 用法 var gulp = require ( 'gulp' ) ; var js2css = require ( 'gulp-js2css' ) ; gulp . task ( 'default' , function ( ) { ...
gulp：将独立css、js文件中的代码注入到html页面中
入坑笔记
11-27 3816
通常开发的时候我们习惯单独创建css、js文件，并引入到html中，这样方便对独立的文件进行依赖引用、压缩处理、css预编译等操作。有时候写的css或者js代码很少，单独放一个文件会增加一次请求，这时候比较适合直接把代码放入html页面中，如何将独立的css、js文件中的代码自动注入到html相应的位置呢，我们用到gulp-inject插件： 安装： npm install --save-d...
vue之package.json文件解析
weixin_30375247的博客
03-29 927
1、package.json是什么？ 什么是Node.js的模块（Module）？在Node.js中，模块是一个库或框架，也是一个Node.js项目。Node.js项目遵循模块化的架构，当我们创建了一个Node.js项目，意味着创建了一个模块，这个模块的描述文件，被称为package.json。 通常情况下package.json内容出错，会导致项目出现bug，...
gulp 引入html,gulp使用——将js、css引入index.html中(以wiredep为例)
weixin_35389904的博客
06-21 152
前端静态资源版本更新与缓存之——通过gulp 在原html文件上自动化添加js、css版本号
湛庐无方
09-03 7924
原理修改js和css文件通过对js,css文件内容进行hash运算，生成一个文件的唯一hash字符串(如果文件修改则hash号会发生变化)替换html中的js,css文件名，生成一个带版本号的文件名 方案现在网上的方案都是生成一个新的dist目录，里面包含了要发布的html,js,css等文件。但是在实际的公司的项目中，会有情况不能生成新的HTML进行发布，需要在原来的HTML文件上进行js ,cs
gulpfile.js 中的坑--注入篇（gulp-inject,gulp-wiredep）
faithfairy的博客
12-10 8126
今天遇到了一个坑，坑了我很久，本来在帝都呼吸就困难，还要来这么一处，真心让人受不了，难怪说屌丝程序猿说高危职业，容易引发猝死，接下来我说一说让我命悬一线的因素。 首先，我是个初学者，菜鸟，屌丝，欢迎吐槽。 坑一： 文件的注入  gulp-inject 插件介绍：css 和 WebComponent 注入插件，即注入到您的index.html文件中（官方解释） 个人理解： 就是把 cs
gulp-ruby-sass：使用Ruby Sass将Sass编译为CSS
02-04
gulp-ruby-sass 使用编译Sass并将结果通过管道传送到gulp流中。 要使用编译Sass，请使用 安装$ npm install --save-dev gulp-ruby-sass需要 。用法sass（来源，[选项]） 使用gulp.src -ruby-sass而不是gulp.src来...
gulp打包js,min.js,d.ts
05-31
gulp打包js,min.js,d.ts等
gulp-csslit：Gulp插件，用于将CSS内容写入JavaScript文件，以与LitElement静态样式一起使用
02-06
gulp-csslit 将CSS内容写入准备由组件导入JavaScript文件中。安装$ npm i -D gulp-csslit用法注意：使用或类似的插件来更改文件名或扩展名。 const gulp = require ( 'gulp' ) ;const csslit = require ( 'gulp-...
gulp-htmlparser:使用 gulp 将 html 解析为 js 对象
06-25
#gulp-htmlparser 插件解析HTML用 包裹gulp-htmlparser 描述使用 gulp 将 html 解析为 js 对象节点版本>= 0.9 吞咽版3.x用法安装 npm install gulp-htmlparser --save＃＃例子 var gulp = require ( 'gulp' ) ;...
gulp 构建前端项目（三） js,css文件名MD5,并修改html中引入的文件名。公共页面的引入
id_no_chinese的博客
07-05 2139
gulp 构建前端项目（一） gulp基础应用gulp构建前端项目（二） 压缩文件，监听修改，浏览器同步gulp已经能打包和实时在浏览器中更新了，接下来就是 预防浏览器缓存对代码的影响。通过修改文件名包含MD5值，可以预防无效缓存。 由于名称修改就会有变化，所以加入了自动引入修改后的文件名。1.通过 gulp-rev 插件给文件名加MD5的后缀。在处理css或者js文件过程中，调用 gulp-...
wiredep----另一种思路的前端模块加载方式
扑满大师
06-19 1786
wiredep另一种思路的前端模块加载方式github传送门很多人会选择amd的requirejs,seajs这样的方式,而wiredep则回归到原始的方式来思考 既然我需要加载n个js文件,那么我就一条条的把他们的列出来 至于他们的依赖关系,我只要拓扑排序计算出来,然后安排好先后关系就可以了先给出一个例子 安装好wiredep的npm包 用bower去安装好要加载的js第三方包 { "n
gulp构建项目之引入zeptojs
easywild的博客
10-12 662
Zeptojs是一个类似于jQuery的库文件，是适用于移动端开发，里面的方法和属性大部分和jQuery相同。 安装：有两种方法，1 通过 npm i zeptojs 进行安装；2 通过下载zeptojs包，然后自己进行编译，然后将编译后的zepto.js文件拷贝到项目中。
gulp-content-includer--合并按模块引入的html文件
gnsydss的专栏
01-04 2593
最近在sf看到好多人提问，问怎样合并include的html文件。这个问题用gulp来解决真是太easy了，早上搜索了一下gulp的插件库，发现好多这样的插件。点进去看了后，发现好多都太弱了，就决定自己写一个，于是就有了下面这个插件。 gulp-content-includer 安装 npm install gulp-content-includer 使用 var
HtmlWebpackPlugin以inine方式引入JS/CSS文件
一路斜阳的专栏
07-09 3384
webpack
gulp实现引用文件内容到该页面
lipingping951462的专栏
01-19 2212
gulp.task('indexrep', () =>  gulp.src([`layout/${tpl}/index.html`]) .pipe(contentIncluder({                 includerReg://gi             }))         .pipe(gulp.dest(`dist/${tpl}/`)) ); 运行indexr
自动驾驶运动规划(Motion Planning).pdf
最新发布
04-26
自动驾驶运动规划(Motion Planning)问题分析
gulp.task("watch",function(){ gulp.watch("./*.html",["copy-html"]); gulp.watch("./*.js",["copy-js"]); gulp.watch("./*.php",["copy-php"]); gulp.watch("./*.css",["copy-css"]); });
06-03
这是一个使用gulp实现的任务，目的是监听当前目录下的html、js、php、css文件的变化，一旦有变化就执行对应的gulp任务，从而实现自动化构建。这个任务定义了一个名为"watch"的gulp任务，使用了gulp.watch方法来监听文件变化，并且传入对应的gulp任务作为回调函数。在这个任务中，当html文件发生变化时，会执行名为"copy-html"的gulp任务；当js文件发生变化时，会执行名为"copy-js"的gulp任务；当php文件发生变化时，会执行名为"copy-php"的gulp任务；当css文件发生变化时，会执行名为"copy-css"的gulp任务。这个任务的作用是在开发过程中，实时监测文件变化，从而提高开发效率。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值