1. 程式人生 > >gulp 插件之 gulp-load-plugins

gulp 插件之 gulp-load-plugins

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 目錄和目標文件。未完待續。。。。





本文出自 “珞辰的博客” 博客,轉載請與作者聯系!

gulp 插件之 gulp-load-plugins