BETA

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

投稿日:2019-08-09
最終更新:2019-08-09
※この記事は外部サイト(https://labor.ewigleere.net/2019/08/09/gul...)からのクロス投稿です

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

参考

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう
目次をみる
技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
or 外部アカウントではじめる
10秒で技術ブログが作れます!