gulp經常使用插件之wiredep使用

時間 2019-12-16

標籤 gulp 經常使用插件 wiredep 欄目 JavaScript 简体版

原文原文鏈接

更多gulp經常使用插件使用請訪問：gulp經常使用插件彙總css

wiredep這是一款gulp插件，可以將js、css文件自動插入到html中。html

更多使用文檔請點擊訪問wiredep工具官網。react

Bower是一個客戶端技術的軟件包管理器，它可用於搜索、安裝和卸載如JavaScript、HTML、CSS之類的網絡資源。jquery

詳細信息請參考bower官網。git

安裝

npm install --save wiredep

使用

首先須要在HTML中插入佔位符，而後在gulp中執行 wiredep({options}) 便可。github

在html中插入依賴項的佔位符：正則表達式

<html>
<head>
  <!-- bower:css -->
  <!-- endbower -->
  //上面兩行是css插入的位置
</head>
<body>
  <!-- bower:js -->
  <!-- endbower -->
  //上面兩行是js插入的位置
</body>
</html>

在gulp中執行wiredep命令：npm

var wiredep = require('wiredep').stream;

gulp.task('bower', function () {
  gulp.src('./src/footer.html')
    .pipe(wiredep({
      optional: 'configuration',
      goes: 'here'
    }))
    .pipe(gulp.dest('./dest'));
});

輸出結果：json

<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詳解gulp

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