gulp-load-plugins詳解

gulp-load-plugins

從package.json文件中加載所需要的gulp插件，可以直接附加到選擇的對象上，而不再需要每一個依次引入

官網鏈接 https://www.npmjs.com/package/gulp-load-plugins

安裝

NPM安裝：

npm install --save-dev gulp-load-plugins

使用

01 - 創建一個package.json文件，在文件中包含一些依賴項

{
    "dependencies": {
        "gulp-jshint": "*",
        "gulp-concat": "*"
    }
}

02 - 在gulpfile文件中引入gulp-load-plugins

// 聲明方法一
const gulp = require("gulp");
const gulpLoadplugins = require("gulp-load-plugins");//gulpLoadplugins是定義的變量名，可自行修改
const $ = gulpLoadplugins();

// 聲明方法二
const gulp = require("gulp");
const $ = require("gulp-load-plugins")();

03 - 使用gulp-load-plugins

// 在使用其他插件時，可以直接使用 $.name(),而不是使用name()
$.jshint = require('gulp-jshint');
$.concat = require('gulp-concat');
// 在使用過中，不需要使用require依次引入每一個插件，直接使用$.插件名稱()的效果與require效果一致

配置項

01 - 默認配置項

gulpLoadPlugins({
    DEBUG: false, // 設置爲true時，該插件會將信息記錄到控制檯。 對於錯誤報告和問題調試很有用
    pattern: ['gulp-*', 'gulp.*', '@*/gulp{-,.}*'], // 將會去搜索的數據
    overridePattern: true, // 如果爲true，則覆蓋內置模式。 否則，擴展內置模式匹配器列表。
    config: 'package.json', // 定義從哪裏搜索插件
    scope: ['dependencies', 'devDependencies', 'peerDependencies'], //在被搜索的文件中要去查看哪些鍵值
    replaceString: /^gulp(-|\.)/, // 將模塊添加到上下文時要從模塊名稱中刪除的內容，例如gulp-rename在使用是爲$.rename()即可，無需前綴
    camelize: true, //如果爲true，則將帶連字符的插件名稱轉換爲駝峯式
    lazy: true, // 插件是否應按需延遲加載
    rename: {}, //重命名插件的映射
    renameFn: function (name) { ... }, //處理插件重命名的功能（默認有效）
    postRequireTransforms: {}, // see documentation below
    maintainScope: true // 切換加載所有npm範圍，如非作用域包
});

02 - 高級使用項

A - 從多個json文件搜索插件

// 使用lodash.merge將多個文件合併爲一個對象，之所以要合併，是因爲load-plugins的配置項 config只接受一個值；
const merge = require("lodash.merge");
const packages = merge(
    require("dev/package.json"),
    require("./package.json")
)

// 使用合併後的文件
const $ = gulpLoadPlugins({
    config:packages
})

B-擴展配置器列表

const overridePlugins = require('gulp-load-plugins')({
  // 默認情況下：覆蓋內置匹配項的配置爲true
  overridePattern: true,
  pattern: ['gulp-*', 'gulp.*', '@*/gulp{-,.}*', 'foo-bar']
});
// 設置複寫內置匹配項爲false，則會在內置匹配項上擴展新增匹配項
const extendedPlugins = require('gulp-load-plugins')({
  overridePattern: false,
  pattern: ['foo-bar']
});