`gulp-ejs`で冒頭の余白を詰めたりHTMLコメントを除去したり

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がすっきりしました。

参考

この記事を書いた人

アバター

アルム=バンド

フルスタックエンジニアっぽい何か。LAMPやNodeからWP、gulpを使ってejs,Scss,JSのコーディングまで一通り。たまにRasPiで遊んだり、趣味で開発したり。