BETA

ejsのオプションを見直す

投稿日:2020-07-10
最終更新:2020-07-10

以前の記事(`gulp-ejs`で冒頭の余白を詰めたりHTMLコメントを除去したり)でgulp-ejsを使用したタスクの中でスペースなどのトリムを行っていました。

const configHtmlMin = {  
    removeComments : true  
};  
const htmlInitDel = /[\s\S]*?(<!DOCTYPE)/i;  
const htmlSpaceLineDel = /[ ]+(\r\n|\n|\r)+/gi;  

const ejs = () => {  
    return gulp.src('./src/ejs/**/*.ejs')  
        .pipe(plumber())  
        .pipe(data((file) => {  
                return { 'filename': file.path }  
            }))  
        .pipe(ejs({ params }))  
        .pipe(rename({ extname: '.html' }))  
        .pipe(replace(htmlInitDel, '$1'))  
        .pipe(htmlmin(configHtmlMin))  
        .pipe(replace(htmlSpaceLineDel, ''))  
        .pipe(gulp.dest(dir.dist.html));  
};  

特に DOCTYPE 宣言前の空白を除去する .pipe(_.replace(/[\s\S]*?(<!DOCTYPE)/, '$1')) の部分ですね。

※ちなみに .pipe(_.htmlmin(jsConfig.configHtmlMin)) はejsのコメントを削除、 .pipe(_.replace(jsConfig.htmlSpaceLineDel, '')) は前述のコメント削除の結果インデントのみ残った部分を削除する処理を行っています。

ところが、先日EJSのドキュメントを改めて読み直してみると以下の既述に気付きました。

  • -%> Trim-mode ('newline slurp') tag, trims following newline

……これを使えば上述の .pipe(_.replace(/[\s\S]*?(<!DOCTYPE)/, '$1')) の処理がいらなくなるのでは?

<%  
parameters = {  
    //略  
}  
%><%- include("util/_init_load") %>  
<!DOCTYPE html>  

試しにこれを

<%  
parameters = {  
    //略  
}  
%->  
<%- include("util/_init_load") -%>  
<!DOCTYPE html>  

こう。

const configHtmlMin = {  
    removeComments : true  
};  
const htmlSpaceLineDel = /[ ]+(\r\n|\n|\r)+/gi;  

const ejs = () => {  
    return gulp.src('./src/ejs/**/*.ejs')  
        .pipe(plumber())  
        .pipe(data((file) => {  
                return { 'filename': file.path }  
            }))  
        .pipe(ejs({ params }))  
        .pipe(rename({ extname: '.html' }))  
        .pipe(htmlmin(configHtmlMin))  
        .pipe(replace(htmlSpaceLineDel, ''))  
        .pipe(gulp.dest(dir.dist.html));  
};  

微妙な差分ですが、先ほどの置換処理を一つ減らしています。

これで問題なく動作することが確認できたのでfix。

参考

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

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

アルム=バンドのQrunch

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう