gulp插件-自动加载插件

gulp的插件数量虽然没有grunt那么多,但也可以说是应有尽有了,下面列举一些gulp常用的插件。
自动加载插件:
使用gulp-load-plugins
安装: 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-gz');

虽然没什么问题,但会使我们的gulpfile.js文件变得非常冗长,看上去很不舒服。gulp-load-plugins插件正是解决这个问题的。
gulp-load-plugins这个插件能自动帮我们加载package.json文件里的gulp插件。假如你的package.json文件里的依赖是这样的:

{
  "devDependencies": {
    "gulp": "~3.6.0",
    "gulp-rename": "~1.2.0",
    "gulp-ruby-sass": "~0.4.3",
    "gulp-load-plugins": "~0.5.1"
  }
}

然后我们可以在gulpfile.js中使用gulp-load-plugins来帮助我们加载插件:

var gulp = require('gulp');
//加载gulp-load-plugins插件,并马上运行它
var plugins = require("gulp-load-plugins")();

然后我们要使用gulp-rename和gulp-ruby-sass这两个插件的时候,就可以使用plugins.rename和plugins.rubySass来代替了,也就是原始插件名去掉gulp-前缀,之后再转换为驼峰命名。实质上gulp-load-plugins是为我们做了如下转换

plugins.rename = require('gulp-rename');
plugins.rubySass = require('gulp-ruby-sass');

gulp-load-plugins并不会一开始就加载所有 package.json里的gulp插件,而是在我们需要用到某个插件的时候,才去加载那个插件。
最后要提醒一点的是,因为 gulp-load-plugins 是通过你的 package.json 文件来加载插件的,所以必须保证你需要自动加载的插件已经写入到了 package.json文件里,并且这些插件都是已经安装好了的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章