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文件裏,並且這些插件都是已經安裝好了的。

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