arm-band/kiribi_ususamaの中で、
gulp-ejsでコンパイルする際にちょっと気になっていた部分を調整してみました。
特に今回ピックアップしたいのはタイトルの2点。
冒頭の余白を詰める
EJSで
DOCTYPE宣言前にEJSのテンプレートを読んだり変数宣言したりすると、コンパイル後に余白になってしまいます。
<%
parameters = {
//略
}
%><%- include("util/_init_load") %>
<!DOCTYPE html>
例えばこんなEJSをコンパイルすると
<!DOCTYPE html>
こんな感じで、
DOCTYPE宣言前に謎の空白が。
これについては
gulp-replaceを使い、
.pipe(gulp.dest('./'))前に
.pipe(_.replace(/[\s\S]*?(<!DOCTYPE)/, '$1'))と正規表現で余白を詰める処理を噛ませて解決。
HTMLコメントの除去
こちらは文字通り。
gulp-ejsのオプションにありそうな感じもするのですが、見付けられなかったので別のgulpプラグインということで、
gulp-htmlminを使うことにしました。
ということで、
return _.gulp.src(
[`src/ejs/**/*.ejs`, `!${dir.src.ejs}/**/_*.ejs`]
)
.pipe(_.plumber())
.pipe(_.data((file) => {
return { 'filename': file.path }
}))
.pipe(_.ejs({ options }))
.pipe(_.rename({ extname: '.html' }))
.pipe(_.gulp.dest(dir.dist.html))
改修前は上述のようなタスクパイプだったのですが、これが以下のようになりました。
return _.gulp.src(
[`src/ejs/**/*.ejs`, `!${dir.src.ejs}/**/_*.ejs`]
)
.pipe(_.plumber())
.pipe(_.data((file) => {
return { 'filename': file.path }
}))
.pipe(_.ejs({ options }))
.pipe(_.rename({ extname: '.html' }))
.pipe(_.replace(/[\s\S]*?(<!DOCTYPE)/, '$1')) //ここと
.pipe(_.htmlmin({
removeComments : true
})) //ここが増えた
.pipe(_.gulp.dest(dir.dist.html))
これでHTMLがすっきりしました。
参考
アルム＝バンド