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：/^(../)+/, //字符串或正则表达式 排除修改输出文件的路径
