gulp 插件之 gulp-load-plugins

gulp-load-plugins 的簡介：

            由於我們項目中有時候會用到很多插件，如果都用 require 進來，我們勢必得寫很多行 require 代碼，雖然這樣沒問題，但是會顯得很冗長，所以 gulp-load-plugins 插件應運而生。gulp-load-plugins 在我們需要用到某個插件的時候，纔去加載那個插件，並不是一開始就全部加載進來。因爲 gulp-load-plugins 是依賴 package.json 文件來加載插件的，所以請確保你需要的插件已經加入 package.json 文件並已經安裝完畢。

一、gulp-load-plugins 插件的使用

1、安裝 “gulp-load-plugins ”插件命令（在終端進入到項目根目錄執行）

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

            npm install --save-dev  gulp-rename

2、在項目根目錄下提供 "gulp-load-plugins" 插件任務配置需要的 src 目錄和源文件（源文件放置到 src 目錄下）

            mkdir src

3、在 gulpfile.js 文件中配置使用 "gulp-load-plugins" 

 // gulp-load-plugins 命令規則爲駝峯命名，比如我們引用 "gulp-rename"就可以 plugins.rename來替代，去掉 gulp- 前綴，再使用駝峯命名。
var gulp = require('gulp'),
      plugins = require('gulp-load-plugins')();  // 加載 "gulp-load-plugins"插件，並馬上運行它 

具體示例：
var gulp = require('gulp'),    
      plugins = require('gulp-load-plugins')();
      
gulp.task('rename', function () {    
    return gulp.src('src/jquery.js')    
        .pipe(plugins.rename({ extname: '.min.js' }))    // 會將 jquery.js 重命名爲 jquery.min.js    
        .pipe(gulp.dest('dist'));    
});

4、最後在終端運行 "gulp rename" 命令

PS：如果沒有錯誤提示信息，證明就沒什麼問題了。現在去項目根目錄下看是否生成 dist 目錄和目標文件。未完待續。。。。