さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【Gulp】ejsを編集したら、編集したファイルだけをhtmlに出力してソースフォーマットもかける

Pocket
LINEで送る

Gulpを使って編集したejsファイルのみをhtmlに出力してソースフォーマットもかけたかったのですが、調べてみてもejsファイル全部に対して処理がかかってしまう方法ばかり。。
これでは1つファイルを編集する度に全ファイルにいちいち更新がかかってしまって効率が悪いので、編集したファイルにだけ処理が行われるように自分でコードを作ってみました。

gulpfile.js

var gulp = require("gulp");

var htmlbeautify = require('gulp-html-beautify'); // htmlのフォーマットを整える
var plumber = require("gulp-plumber"); // エラーによる監視解除の対応
var ejs = require("gulp-ejs"); // EJSからhtmlへ出力
var rename = require("gulp-rename"); // EJSをhtmlにリネーム

// EJSからhtmlへ出力
gulp.task("ejs", function() {
	gulp.src(
		["ejs/**/*.ejs",'!' + "ejs/**/_*.ejs"]
	)
		.pipe(plumber()) // エラーによる監視解除の対応
		.pipe(ejs())
		.pipe(rename({extname: ".html"})) //拡張子をhtmlに
		.pipe(gulp.dest("./"));
});

// EJSに修正が入ったらhtmlに出力
gulp.task('ejsWatch', function () {
	var watcher = gulp.watch(["ejs/**/*.ejs",'!' + "ejs/**/_*.ejs"]);
	watcher.on('change', function(e) {
		console.log('file: ' + e.path + ', type: ' + e.type);
		gulp.src(
			[e.path]
		)
			.pipe(plumber()) // エラーによる監視解除の対応
			.pipe(ejs())
			.pipe(rename({extname: ".html"})) //拡張子をhtmlに
			.pipe(gulp.dest("./"));
	});
});

// htmlのフォーマットを整える
gulp.task('htmlbeautify', function() {
	gulp.src('./*.html')
		.pipe(plumber()) // エラーによる監視解除の対応
		.pipe(htmlbeautify({indent_with_tabs: true}))
		.pipe(gulp.dest("./"));
});

// htmlに修正が入ったらソースフォーマット実行
gulp.task('htmlWatch', function () {
	var watcher2 = gulp.watch(['./*.html']);
	watcher2.on('change', function(e) {
		console.log('file: ' + e.path + ', type: ' + e.type);

		gulp.src(e.path)
			.pipe(plumber()) // エラーによる監視解除の対応
			.pipe(htmlbeautify({indent_with_tabs: true}))
			.pipe(gulp.dest("./"));
	});
});

// ファイルを監視
gulp.task("default",['compass','ejsWatch','htmlWatch'], function() {
	gulp.watch('sass/**/*.scss', ['compass']); // compassの監視
});

カテゴリー:Gulp, HP制作

コメントを残す

コメント内容