テンダ仙台支店のサトウ スグルです。
このサイトでも何度か記事にしてきたGulpとEJSに関するお話です。
Gulp+EJSですが、基本的にHTMLの書き出しに限定されています。
でも実際には、「9割は静的HTML。でも1割だけPHPを使う」みたいなケースがありますよね。
例えばメールフォームとか。
せっかくEJSでヘッダーやフッターを共通化してるのにそこだけ個別管理になるのは不便です。
なんとかシンプルにまとめたいですよね。
実は、gulpfile.jsの設定次第ではPHPの書き出しも可能なんです。
通常のHTML書き出しするものと共存させようとした結果、下記のような形に落ち着きました。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
var gulp = require("gulp"); var ejs = require("gulp-ejs"); var rename = require("gulp-rename"); var plumber = require('gulp-plumber'); var DEV = "app/dev", PUBLIC = "app/public"; //EJS書き出し用 gulp.task("ejs", function () { gulp.src([ DEV + "/ejs/**/*.ejs", '!' + DEV + "/ejs/common", '!' + DEV + "/ejs/**/_*.ejs", '!' + DEV + "/ejs/**/*_php.ejs" ]) 〜EJSのtask省略〜 }); //PHP書き出し用 gulp.task("php", function () { gulp.src([ DEV + "/ejs/**/*_php.ejs" ]) .pipe(plumber()) .pipe(ejs()) .pipe(rename(function (path) { path.basename = path.basename.replace( "_php" , "" ); path.extname = ".php" })) .pipe(gulp.dest(PUBLIC)); }); //監視 gulp.task('watch', function () { //〜HTMLとかSCSSのwatch〜 gulp.watch('app/dev/**/*_php.ejs', ['php']); }); |
HTML書き出しするタスクは省略しています。
解説するほどの内容はありませんが、ファイル名の末尾が_php.ejsものだけを対象に実行するタスクです。
逆に通常のEJS→HTMLのタスクの時には_php.ejsを除外するようにしておきます。
正規の使い方ではないですが、参考にしてみてください。
今回はこれにて。