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 ...
随机推荐
- 《C# 爬虫 破境之道》:第二境 爬虫应用 — 第七节:并发控制与策略
我们在第五节中提到一个问题,任务队列增长速度太快,与之对应的采集.分析.处理速度远远跟不上,造成内存快速增长,带宽占用过高,CPU使用率过高,这样是极度有害系统健康的. 我们在开发采集程序的时候,总是 ...
- Vue实战之【企业开发常见问题】
1.vue框架使用注意事项和经验 1.1 解决Vue动态路由参数变化,页面数据不更新 问题描述: 遇到动态路由如:/page/:id 从/page/1 切换到 /page/2 发现页面组件没有更新 解 ...
- Linux 配置ip 子接口 多网卡绑定
linux系统配置ip地址,图形化界面略过,这里只介绍文本行.做以下设置注意是否有此权限 查看当前路由及网关信息: [root@localhost ~]# netstat -r Kernel IP r ...
- iptables之路由网关共享上网/端口映射
linux-A 主机配置eth0即可: [root@linux-A ~]# ifconfig eth0|sed -n '2p' inet addr:192.168.20.3 Bcast:192.168 ...
- 一台机器上同时运行两个tomcat
修改conf/server.xml文件,修改地方有三处 如图
- (数据科学学习手札78)基于geopandas的空间数据分析——基础可视化
本文对应代码和数据已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 通过前面的文章,我们已经对geopanda ...
- 用 Python 分析今年考研形势
还有5天,就到了考研初试的时间了. ! 尽管今年研招网内部,已经做了优化改善,还是抵挡不住考生们的报名热情(网站崩溃). 2017年考研人数增长至201万人, 2018年则达到238万人, 201 ...
- ubuntu18.04管理redis
ubuntu下 redis的安装使用 安装 1. 进入redis安装路径 cd ~/installed/redis-5.0.7 2. 启动redis 启动服务端redis-server 启动客户端(必 ...
- 03.JS运算符
前言: 学习一门编程语言的基本步骤 (01)了解背景知识 (02)搭建开发环境 (03)语法规范 (04)常量和变量 (05)数据类型 (06)数据类型转换 (07)运算符7.运算符 表达式:由运 ...
- datagridview 如何显示记载中
要实现如下效果,有何思路?