gulp-load-plugins自动加载插件

不念不忘少年蓝@ 2022-06-06 02:37 277阅读 0赞

安装：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 
    });