gulp之gulp-load-plugins自动加载插件

Posted 2021-04-08 前端开发自留地

要使用gulp的插件，首先得用require把插件加载进来，如果我们要使用的插件非常之多，那我们的gulpfile.js文件可能就会是这个样子的：

const gulp = require('gulp');

const jshint = require('gulp-jshint');
const uglify = require('gulp-uglify');
const tinypng-unlimite = require('gulp-tinypng-unlimite');

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe(jshint())
      .pipe(uglify())
      .pipe(gulp.dest('build'));

});


gulp.task('image', () => {
  return gulp.src('src/images/**/*.*')
        .pipe(tinypng-unlimite())
‍        ‍.pipe(gulp.dest('build/images'));
});

这样一来我们的gulpfile.js文件变得很冗长，gulp-load-plugins自动加载插件正是用来解决这些问题。

gulp-load-plugins安装

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

gulp-load-plugins使用

const gulp = require('gulp');
const $ = require('gulp-load-plugins')();

gulp.task('js', function () {
   return gulp.src('js/*.js')
      .pipe($.jshint())
      .pipe($.uglify())
      .pipe(gulp.dest('build'));
});

gulp.task('image', () => {
  return gulp.src('src/images/**/*.*')
        .pipe($.tinypngUnlimited())//注意多个连字符插件引用时要转换为驼峰
          .pipe(gulp.dest('build/images'));
});

gulp-load-plugins的Options参数

gulpLoadPlugins({
    DEBUG: false, // 当设置为true时，插件将登录信息到控制台。有助于错误报告和发布调试 
    pattern: ['gulp-*', 'gulp.*', '@*/gulp{-,.}*'], // 正则搜索匹配gulp开头的插件 
    overridePattern: true, // 当为true时，重写内置模式。否则，扩展内置模式匹配器列表。 
    config: 'package.json', // 在哪里找到插件，默认情况下从当前进程的工作目录下的package.json
    scope: ['dependencies', 'devDependencies', 'peerDependencies'], // 配置中的哪些键内部查找
    replaceString: /^gulp(-|\.)/, // 当将模块添加到上下文中时，要从模块的名称中移除什么 
    camelize: true, // 如果为真，则将连字符的插件名称转换为驼峰情况。 
    lazy: true, // 插件是否需要按需加载 
    rename: {}, // 插件重新命名的映射
    renameFn: function (name) { ... }, // 一个处理插件重命名的函数（默认工作）
    postRequireTransforms: {}, // see documentation below 
    maintainScope: true // 切换加载所有NPM作用域，如非作用域包 
});

从上面的Options参数不难看出要注意的地方：

gulp-load-plugins是通过你的package.json文件来加载插件的，所以必须要保证你需要自动加载的插件已经写入到了package.json文件里，并且这些插件都是已经安装好了的。

package.json

{
  "devDependencies": {
  "gulp-csslint": "^0.1.5",
  "gulp-uglify": "^3.0.0",
    "gulp-tinypng-unlimited": "^1.0.2"
  }
}

gulp-load-plugins并不会一开始就加载所有package.json里的gulp插件，而是在我们需要用到某个插件的时候，才去加载那个插件。