gulp常用插件之wiredep使用

更多gulp常用插件使用请访问：

wiredep这是一款gulp插件，能够将js、css文件自动插入到html中。

更多使用文档请点击访问wiredep工具官网。

Bower是一个客户端技术的软件包管理器，它可用于搜索、安装和卸载如JavaScript、HTML、CSS之类的网络资源。

详细信息请参考bower官网。

安装

 npm install --save wiredep

使用

首先需要在HTML中插入占位符，然后在gulp中执行 wiredep({options}) 即可。

在html中插入依赖项的占位符：

  
  
  //上面两行是css插入的位置


  
  
  //上面两行是js插入的位置

在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'));
});
 

输出结果：

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

更多参数详解请访问官网