安装:npm install –save-dev gulp-load-plugins
要使用gulp的插件,首先得用require来把插件加载进来,如果我们要使用的插件非常多,那我们的gulpfile.js文件开头可能就会是这个样子的:
var gulp = require('gulp'),
//一些gulp插件,abcd这些命名只是用来举个例子
a = require('gulp-a'),
b = require('gulp-b'),
c = require('gulp-c'),
d = require('gulp-d'),
e = require('gulp-e'),
f = require('gulp-f'),
g = require('gulp-g'),
//更多的插件...
z = require('gulp-z');
虽然这没什么问题,但会使我们的gulpfile.js文件变得很冗长,看上去不那么舒服。gulp-load-plugins插件正是用来解决这个问题。
gulp-load-plugins这个插件能自动帮你加载package.json文件里的 gulp 插件。例如假设你的package.json文件里的依赖是这样的:
{
"devDependencies": {
"babel-register": "^6.22.0",
"babel-runtime": "^6.20.0",
"browser-env": "^2.0.31",
"del": "^1.2.0",
"event-stream": "^3.3.1",
"find-up": "^2.1.0",
"glob": "^5.0.10",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.2.2",
"gulp-clone": "^1.0.0",
"gulp-concat": "^2.5.2",
"gulp-csslint": "^0.1.5",
"gulp-ect-simple": "^0.1.0",
"gulp-gzip": "^1.1.0"
}
}
然后我们可以在gulpfile.js中使用gulp-load-plugins来帮我们加载插件:
var gulp = require('gulp');
//加载gulp-load-plugins插件,并马上运行它
var plugins = require('gulp-load-plugins')();
//或是:
//var gulpLoadPlugins = require('gulp-load-plugins');
//var plugins = gulpLoadPlugins();
然后我们要使用gulp-clone和gulp-clean-css这两个插件的时候,就可以使用plugins.clone和plugins.cleanCss来代替了,也就是原始插件名去掉gulp-前缀,之后再转换为驼峰命名。
实质上gulp-load-plugins是为我们做了如下的转换
plugins.clone= require(‘gulp-clone’);
plugins.cleanCss= require(‘gulp-clean-css’);
gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件,而是在我们需要用到某个插件的时候,才去加载那个插件。
最后要提醒的一点是,因为gulp-load-plugins是通过你的package.json文件来加载插件的,所以必须要保证你需要自动加载的插件已经写入到了package.json文件里,并且这些插件都是已经安装好了的。
Options参数:
gulpLoadPlugins({
DEBUG: false, // when set to true, the plugin will log info to console. Useful for bug reporting and issue debugging
pattern: ['gulp-*', 'gulp.*', '@*/gulp{-,.}*'], // the glob(s) to search for
overridePattern: true, // When true, overrides the built-in patterns. Otherwise, extends built-in patterns matcher list.
config: 'package.json', // where to find the plugins, by default searched up from process.cwd()
scope: ['dependencies', 'devDependencies', 'peerDependencies'], // which keys in the config to look within
replaceString: /^gulp(-|\.)/, // what to remove from the name of the module when adding it to the context
camelize: true, // if true, transforms hyphenated plugins names to camel case
lazy: true, // whether the plugins should be lazy loaded on demand
rename: {}, // a mapping of plugins to rename
renameFn: function (name) { ... }, // a function to handle the renaming of plugins (the default works)
postRequireTransforms: {}, // see documentation below
maintainScope: true // toggles loading all npm scopes like non-scoped packages
});