【Gulp】ejsを編集したら、編集したファイルだけをhtmlに出力してソースフォーマットもかける
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の監視 });
コメントを残す