このプラグインを使います
gulp-load-plugins
https://www.npmjs.com/package/gulp-load-plugins
プラグインを読み込むためrequireしていくと
いつのまにかrequireだらけになります。
まとめて読み込みたい。
このgulp環境に適用してみます
gulpでphpをhtmlに変換してValidateする
https://qiita.com/bonsai3/items/f8e6481990f2a0ab6fd5
事前準備
package.json
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
変更前
プラグインをまとめて読み込む前の状態です
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"]);
変更後
プラグインをまとめて読み込みます
gulpfile.js
// 環境変数
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"
]
});
以上です。
ありがとうございました。