更多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. Coroutine 练习 1 - Coroutine Exercises 1

    Coroutine 练习 1 - Coroutine Exercises 1 字典中为动词 “to yield” 给出了两个释义:产出和让步.对于 Python 生成器中的 yield 来 说,这两个 ...

  2. 大神是如何学习 Go 语言之 Channel 实现原理精要

    转自: https://mp.weixin.qq.com/s/ElzD2dXWeldYkJmVVY6Djw 作者Draveness Go 语言中的管道 Channel 是一个非常有趣的数据结构,作为语 ...

  3. 消息队列MQ集合

    消息队列MQ集合 消息队列简介 kafka简介 Centos7部署zookeeper和Kafka集群 .

  4. 4.【Spring Cloud Alibaba】服务容错-sentinel

    雪崩效应 常见容错方案 超时 限流 仓壁模式 断路器模式 断路器三态转换 使用Sentinel实现容错 什么是Sentinel https://github.com/alibaba/Sentinel ...

  5. 对象级别锁 vs 类级别锁（Java）

    前言 对于多线程(并发)和Spring Boot这两块在同步进行学习中,在看到使用synchronized关键字使操作同步时,看到和C#中不一样的东西,所以这里呢,就深入学习了下,若有错误之处,还望指 ...

  6. linux中文件处理命令

    目录 touch cat more less head tail touch 解释 命令名称:touch 命令所在路径:/bin/touch 执行权限:所有用户 功能描述:创建空文件 语法 touch ...

  7. symfonos2

    0x01 进入网页 啥也没有 0x02 目录爆破 啥也没有 0x03 端口扫描 知识盲区: ProFTPD 1.3.5 用ProFTPD服务权限执行复制命令,默认在'nobody'用户的特权下运行.通 ...

  8. jni 文件切割合并

    最近学习c++,看到很多常用的例子,比如文件切割,切割后后缀可以自定义,别人就无法从表面的一个文件看出是什么,也无法查看到原文件信息,只有合并后才能识别这庐山真面目 实现也比较粗暴,首先在应用层定义好 ...

  9. 【读书笔记】https://source.android.google.cn/devices/bootloader

    https://source.android.google.cn/devices/bootloader 本文主要记录aosp官网关于bootloader的相关资料 Bootloader A bootl ...

  10. nginx 修改上传文件的大小限制

    nginx默认的上传文件大小是有限制的,一般为2MB,如果你要上传的文件超出了这个值,将可能上传失败.修改的地方有: 1. php.ini: upload_max_filesize = 8M   2. ...