gulp常用插件之wiredep使用
更多gulp常用插件使用请访问：gulp常用插件汇总
wiredep这是一款gulp插件，能够将js、css文件自动插入到html中。
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_componentsbowerJson：'您的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: falseexclude: [ /jquery/, 'bower_components/modernizr/modernizr.js' ], //排除依赖ignorePath：/^(../)+/, //字符串或正则表达式 排除修改输出文件的路径
gulp常用插件之wiredep使用的更多相关文章
- gulp常用插件之gulp-inject使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-inject这个插件的作用与wiredep类似,不同的是可以自己任意指定需要插入文件的列表.它同样是利用注释来寻找插入的位置.获取源文件 ...
- 精通gulp常用插件
本文主要展示的是gulp常用插件的使用方法和用途,通过对插件的熟练运用达到精通gulp.不定期更新.可以到github上面下载DEMO. github地址:lin-xin/gulp-plugins 匹 ...
- node和gulp实现前端工程自动化(附：gulp常用插件)
/** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */ // 在gulpfile中先载入gulp包,因为这个包提供了一些APIv ...
- gulp常用插件之gulp-eslint使用
更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-eslint**这是一个用于识别和报告在ECMAScript/JavaScript代码中找到的模式的Gulp插件.. 更多使用文档 ...
- gulp常用插件之gulp-babel使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-babel这是Babel的Gulp插件. 此自述文件适用于gulp-babel v8 + Babel v7检查7.x分支以了解使用Bab ...
- gulp常用插件之gulp-postcss使用
更多gulp常用插件使用请访问:gulp常用插件汇总 ** gulp-postcss**这是一款通过多个插件通过管道传递CSS,但是仅解析一次CSS. 更多使用文档请点击访问gulp-postcss工 ...
- gulp常用插件之cssnano使用
更多gulp常用插件使用请访问:gulp常用插件汇总 cssnano这是一款将你的 CSS 文件做 多方面的的优化,以确保最终生成的文件 对生产环境来说体积是最小的插件. 更多使用文档请点击访问cha ...
- gulp常用插件之pump使用
更多gulp常用插件使用请访问:gulp常用插件汇总 pump这是一款小型节点模块,可将流连接在一起并在其中一个关闭时将其全部销毁. 使用标准source.pipe(dest)源时,如果dest发出关 ...
- gulp常用插件之gulp-notify使用
更多gulp常用插件使用请访问:gulp常用插件汇总 gulp-notify这是一款gulp通知插件. 更多使用文档请点击访问gulp-notify工具官网. 安装 一键安装不多解释 npm inst ...
随机推荐
- ajax jsonp跨域 【转】
跨域的基本原理: JSONP跨域GET请求是一个常用的解决方案, JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的 ...
- k8s系列---StorageClass
介绍这个概念前,需要提前知道存储卷pv/pvc之类的概念. 之前的文章有关于EFK日志系统的介绍,里面的环境是测试环境,完全按照教程一步步的操作,甚至注释掉了持久化存储,当真正线上部署时,又抓虾,打开 ...
- php页面传递参数值几种方法总结
2013-06-06 18:02 (分类:) 又搞了一个学期的php,就这样吧. php是一种服务器的脚本语言,他也是现在最为流行的WEB开发语言,下面我们来讲述一下几种上在php开发应用中常用的四种 ...
- NCE L5
课文内容 重点单词解析 重点课文解析
- A——大整数加法（HDU1002）
题目: I have a very simple problem for you. Given two integers A and B, your job is to calculate the S ...
- js , forEach 用法
person.forEach((item,index) => { console.log( item.id ); if( id == item.id ){ item.is_selected = ...
- UWP通过机器学习加载ONNX进行表情识别
首先我们先来说说这个ONNX ONNX是一种针对机器学习所设计的开放式的文件格式,用于存储训练好的模型.它使得不同的人工智能框架(如Pytorch, MXNet)可以采用相同格式存储模型数据并交互. ...
- openlayers6实现webgl点图层渲染效果(附源码下载)
前言:openlayers6推出来的有一段时间,推出来的新特性见:https://github.com/openlayers/openlayers/releases/该版本的主要功能是能够组合具有不同 ...
- Linux如何定位文件在磁盘的物理位置
我在学习研究Linux内核结构的时候,思考过一个问题:Linux如何定位文件在磁盘的物理位置每个文件都有一个inode,inode在内核代码中的数据结构如下: 1 struct ext4_inode ...
- 【STM32H7教程】第46章 STM32H7的ADC应用之DMA方式多通道采样
完整教程下载地址:http://www.armbbs.cn/forum.php?mod=viewthread&tid=86980 第46章 STM32H7的ADC应用之DMA方式多 ...