更多gulp常用插件使用请访问：gulp常用插件汇总

wiredep这是一款gulp插件，能够将js、css文件自动插入到html中。

更多使用文档请点击访问wiredep工具官网。

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

详细信息请参考bower官网。

安装

 npm install --save wiredep

使用

首先需要在HTML中插入占位符，然后在gulp中执行 wiredep({options}) 即可。

在html中插入依赖项的占位符：

<html>

<head>

  <!-- bower:css -->

  <!-- endbower -->

  //上面两行是css插入的位置

</head>

<body>

  <!-- bower:js -->

  <!-- endbower -->

  //上面两行是js插入的位置

</body>

</html>

在gulp中执行wiredep命令：

var wiredep = require('wiredep').stream;

gulp.task('bower', function () {

  gulp.src('./src/footer.html')

    .pipe(wiredep({

      optional: 'configuration',

      goes: 'here'

    }))

    .pipe(gulp.dest('./dest'));

});

输出结果：

<html>

<head>

  <!-- bower:css -->

  <link rel="stylesheet" href="../bower_components/animate.css/animate.css" />

  <!-- endbower -->

</head>

<body>

    <script src="../bower_components/react/react.development.js"></script>

    <script src="../bower_components/react/react-dom.development.js"></script>

    <script src="../bower_components/moment/moment.js"></script>

    <script src="../bower_components/layui/src/layui.js"></script>

</body>

</html>

options详解

  • directory : ' 存放bower包的目录，这个目录是'.bowerrc'文件中的.directory', //默认值：'.bowerrc'.directory || bower_components
  • bowerJson：'您的bower.json文件内容。', //默认值：require（'./ bower.json'）
  • src : ['filepaths', 'and/even/globs/*.html', 'to take', 'control of.'],

  • // -----高级配置-----

    //所有的下方设置有用于高级配置，以

    //为其他文件类型给项目的支持和更

    //控制。

    //

    //开箱，wiredep将处理HTML文件就好

    // JavaScript和CSS注入。

  • cwd : 'path/to/where/we/are/pretending/to/be',
  • dependencies: true, // default: true 注入依赖组件
  • devDependencies: true, // default: false 注入开发版中的依赖组件
  • includeSelf: true, // default: false
  • exclude: [ /jquery/, 'bower_components/modernizr/modernizr.js' ], //排除依赖
  • ignorePath ：/^(../)+/, //字符串或正则表达式 排除修改输出文件的路径

更多参数详解请访问官网

gulp常用插件之wiredep使用的更多相关文章

  1. gulp常用插件之gulp-inject使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-inject这个插件的作用与wiredep类似,不同的是可以自己任意指定需要插入文件的列表.它同样是利用注释来寻找插入的位置.获取源文件 ...

  2. 精通gulp常用插件

    本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp.不定期更新.可以到github上面下载DEMO. github地址:lin-xin/gulp-plugins 匹 ...

  3. node和gulp实现前端工程自动化(附：gulp常用插件)

    /** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...

  4. gulp常用插件之gulp-eslint使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-eslint**这是一个用于识别和报告在ECMAScript/JavaScript代码中找到的模式的Gulp插件.. 更多使用文档 ...

  5. gulp常用插件之gulp-babel使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-babel这是Babel的Gulp插件. 此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Bab ...

  6. gulp常用插件之gulp-postcss使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-postcss**这是一款通过多个插件通过管道传递CSS,但是仅解析一次CSS. 更多使用文档请点击访问gulp-postcss工 ...

  7. gulp常用插件之cssnano使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 cssnano这是一款将你的 CSS 文件做 多方面的的优化,以确保最终生成的文件 对生产环境来说体积是最小的插件. 更多使用文档请点击访问cha ...

  8. gulp常用插件之pump使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 pump这是一款小型节点模块,可将流连接在一起并在其中一个关闭时将其全部销毁. 使用标准source.pipe(dest)源时,如果dest发出关 ...

  9. gulp常用插件之gulp-notify使用

    更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-notify这是一款gulp通知插件. 更多使用文档请点击访问gulp-notify工具官网. 安装 一键安装不多解释 npm inst ...

随机推荐

  1. c++ 中全局/静态存储区的内存污染问题

    今天研究用回溯法解决八皇后问题,碰到了一个有趣的小问题. 看这篇随笔前,最好先看看我上一篇所写的 c++ 内存分配中一个有趣的小问题. 先看代码 #pragma once #pragma execut ...

  2. JMeter接口测试-接口签名校验

    前言 很多HTTP接口在传参时,需要先对接口的参数进行数据签名加密 如pinter项目的中的签名接口 http://localhost:8080/pinter/com/userInfo 参数为: {& ...

  3. ospfv3 lsa database

    https://www.networkfuntimes.com/ospfv3-the-new-lsa-types-in-ipv6-ospf/ WHY DID THEY CHANGE THE LSAs ...

  4. 使用Git和Svn

    一. 使用SVN 1. 下载tortoiseSVN 2. 右键SVN checkout(下载项目到本地) 3. 更新和提交 二. 使用GIT 1. 下载git 2. 下载tortoiseGit 3. ...

  5. 你应该了解的 Java SPI 机制

    前言 不知大家现在有没有去公司复工,我已经在家办公将近 3 周了,同时也在家呆了一个多月:还好工作并没有受到任何影响,我个人一直觉得远程工作和 IT 行业是非常契合的,这段时间的工作效率甚至比在办公室 ...

  6. apache/tomcat安装过程略

    apache/tomcat安装过程略 一些变量 apache安装目录 APACHE_PREFIX=/Data/app/apache apache配置文件 APACHE_CONF=/etc/httpd/ ...

  7. telnet命令连接服务器端

    win7: (1).使用telnet命令: 控制面板--->程序--->打开或关闭Windows功能--->Telnet客户端[勾选] (2)连接(cmd) eg:telnet ww ...

  8. Failed to get convolution algorithm解决

    蒸腾了两天,终于搞定了 是cudnn版本的问题 更新cudnn的时候,首先要删除/usr/local/cuda-10.0/targets/x86_64-linux/lib路径下所有之前cudnn版本的 ...

  9. 你一定看得懂的 DDD+CQRS+EDA+ES 核心思想与极简可运行代码示例

    前言 随着分布式架构微服务的兴起,DDD(领域驱动设计).CQRS(命令查询职责分离).EDA(事件驱动架构).ES(事件溯源)等概念也一并成为时下的火热概念,我也在早些时候阅读了一些大佬的分析文,学 ...

  10. mysql--容器无法启动

    mysql服务总是在重启状态 查看mysql容器日志 # docker logs 镜像名称 InnoDB: If this error appears when you are creating an ...