🍀

gulpでプラグインをまとめて読み込む [gulp-load-plugins]

2020/09/27に公開

Gulp

JavaScript

PHP

tech

このプラグインを使います

gulp-load-plugins

プラグインを読み込むためrequireしていくと
いつのまにかrequireだらけになります。

まとめて読み込みたい。

このgulp環境に適用してみます

gulpでphpをhtmlに変換してValidateする

事前準備

package.json

{
	"name": "dev",
	"version": "1.0.0",
	"author": "",
	"main": "gulpfile.js",
	"license": "ISC",
	"devDependencies": {
		"gulp": "*",
		"gulp-htmlhint": "*",
		"gulp-php2html": "*",
		"gulp-load-plugins": "*",
		"gulp-plumber": "*",
		"gulp-w3cjs": "*"
	}
}

これを追加してあります

"gulp-load-plugins": "*",

gulpfile.js

変更前

プラグインをまとめて読み込む前の状態です

// 環境変数
const setting = {
	html: {
		src: "./root/*.php",
		dest: "./html"
	}
};

const gulp = require("gulp");

// プラグインの読み込み
const php2html = require("gulp-php2html");
const htmlhint = require("gulp-htmlhint");
const plumber = require("gulp-plumber");
const w3cjs = require("gulp-w3cjs");

// phpからhtmlに変換するタスクを作成
gulp.task("html", () => {
	return (
		gulp
			// 変換対象のファイル
			.src(setting.html.src)
			// php→html変換
			.pipe(php2html())
			// htmlを保存
			.pipe(gulp.dest(setting.html.dest))
	);
});

// htmlをValidateするタスクを作成
// 「html」を実行してから、この「Validate」タスクを実行する
gulp.task("validate", ["html"], () => {
	return (
		gulp
			// Validate対象のファイル
			.src(setting.html.dest + "/**/*.html")
			// エラー発生時にgulpが強制停止するのを防止
			.pipe(plumber())
			// Validateする
			.pipe(htmlhint(".htmlhintrc"))
			// 追加でValidateする
			.pipe(w3cjs())
			// Validate結果をコマンドラインに表示
			.pipe(htmlhint.failReporter())
	);
});

// ファイルの変更を監視してタスク実行
gulp.task("watch", () => {
	gulp.watch(setting.html.src, ["validate"]);
});

// gulp起動時に実行するタスク
gulp.task("default", ["watch"]);

変更後

プラグインをまとめて読み込みます

// 環境変数
const setting = {
	html: {
		src: "./root/*.php",
		dest: "./html"
	}
};

const gulp = require("gulp");

// プラグインの読み込み
const $ = require("gulp-load-plugins")();

// phpからhtmlに変換するタスクを作成
gulp.task("html", () => {
	return (
		gulp
			// 変換対象のファイル
			.src(setting.html.src)
			// php→html変換
			.pipe($.php2html())
			// htmlを保存
			.pipe(gulp.dest(setting.html.dest))
	);
});

// htmlをValidateするタスクを作成
// 「html」を実行してから、この「Validate」タスクを実行する
gulp.task("validate", ["html"], () => {
	return (
		gulp
			// Validate対象のファイル
			.src(setting.html.dest + "/**/*.html")
			// エラー発生時にgulpが強制停止するのを防止
			.pipe($.plumber())
			// Validateする
			.pipe($.htmlhint(".htmlhintrc"))
			// 追加でValidateする
			.pipe($.w3cjs())
			// Validate結果をコマンドラインに表示
			.pipe($.htmlhint.failReporter())
	);
});

// ファイルの変更を監視してタスク実行
gulp.task("watch", () => {
	gulp.watch(setting.html.src, ["validate"]);
});

// gulp起動時に実行するタスク
gulp.task("default", ["watch"]);

gulpfile.jsの変更箇所

この記述でプラグインをまとめて読み込んでいます。

// プラグインの読み込み
const $ = require("gulp-load-plugins")();

「$」に入れています。
呼び出しはこうなります。

// エラー発生時にgulpが強制停止するのを防止
.pipe($.plumber())
// Validateする
.pipe($.htmlhint(".htmlhintrc"))
// 追加でValidateする
.pipe($.w3cjs())
// Validate結果をコマンドラインに表示
.pipe($.htmlhint.failReporter())

「$.」が追記されています

#読み込めるプラグイン

gulp-load-pluginsは「gulp-*」で始まるプラグインを読み込んでくれます。

##「gulp-*」で始まらないプラグインはどうするか？

「パターン」を指定することができます。

これを

// プラグインの読み込み
const $ = require("gulp-load-plugins")();

こうします。
「browser-sync」など「gulp-」で始まらないプラグインを読み込んだ例です。

const $ = require('gulp-load-plugins')({
	pattern: [
		"gulp-*",
		"gulp.*",
		"browser-sync",
		"run-sequence",
		"node-sass-package-importer"
	]
});

以上です。
ありがとうございました。