Tweet

Pocket

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の監視
});