更多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. Go语言实现：【剑指offer】机器人的运动范围

    该题目来源于牛客网<剑指offer>专题. 地上有一个m行和n列的方格.一个机器人从坐标0,0的格子开始移动,每一次只能向左,右,上,下四个方向移动一格,但是不能进入行坐标和列坐标的数位之 ...

  2. Robot Framework自动化测试框架核心指南-如何使用Java编写自定义的RobotFramework Lib

    如何使用Java编写自定义的RobotFramework Lib 本文包括2个章节 1. Robot Frdamwork中如何调用java Lib库 2.使用 java编写自定义的Lib 本文作者为: ...

  3. SSM/SSH框架的MySQL 读写分离实现的一种简单方法

    简介 MySQL已经是使用最为广泛的一种数据库,往往实际使用过程中,为实现高可用及高性能,项目会采用主丛复制的方式实现读写分离.MySQL本身支持复制,通过简单的配置即可实现一主多从的配置,具体实现可 ...

  4. 软件bug描述(android)

    1.bug主题:主要操作+bug主题 主题要简单明了,即开发一看主题就知道该问题. 2.描述: 作用:便于开发重现和定位缺陷的 2.1前置条件 2.2操作步骤 2.3预期结果 2.4实际结果 2.5备 ...

  5. NOIP2012-------跳石头（C语言）

    #include<stdio.h> ]; int check(long mid, long n, long m) { long last, i, ans; last = a[]; ans ...

  6. vs code支持 es6, node.js 语法提示

    npm install --save-dev @types/node 安装这个东西就可以了, 代码拷走, 回去愉快的敲代码吧

  7. Docker深入浅出系列 | 容器数据持久化

    Docker深入浅出系列 | 容器数据持久化 Docker已经上市很多年,不是什么新鲜事物了,很多企业或者开发同学以前也不多不少有所接触,但是有实操经验的人不多,本系列教程主要偏重实战,尽量讲干货,会 ...

  8. vue中子组件触发父组件的方法

    网上找了几种方法,下面这两种最实用,最明了 方法一:父组件方法返回是字符串或数组时用这种方法 子组件: <template> <button @click="submit& ...

  9. SQL Server 2019 表无法修改问题

    SQL Server 2019 表无法修改问题 问题描述: 解决方法: 1.在菜单栏中,点击工具->选项,示例: 2.在选项中单击设计器->表设计器和数据库设计器->取消勾选阻止保存 ...

  10. 掌握这13个MySQL索引知识点，让你面试通过率翻倍

    数据库索引有关的知识,说实在的,真的是很复杂,本来想好好看看这方面的东西,然后写篇文章详细谈谈的,后来发现索引的知识太难太深,要谈得全面又详细真的很难,所以最后还是把自己学到的和想到的变成下面一个个的 ...