開発環境にglup+EJSを導入したよ

gulp-ejsの導入メモです。ググると結構古い情報も混在してて、なかなかハマりました。

    導入のきっかけ

    SIRIUSテンプレートのAMP対応がやりたくて、cssをインクルードするのにHTMLのテンプレートエンジンが便利そうだなということでgulpを導入してgulp-ejsをインストールしました。

    実は今までタスクランナーを使ったことなくて、Sassのコンパイルやminifyといった作業は全部Atomのパッケージで済ませていました。あとこまごましたものはバッチファイルを作って直接実行したりとか。

    タスクランナー自体ずっと気になってたので、この機に導入できてよかったです。

    SIRIUS案件で使用するにあたり、タグのデリミタ<% %>がSIRIUSの独自タグと被ってるのが懸念でしたが、変更が効くという噂を聞いて導入しました。

    ところが変更できなくなったという情報を得てちょっと慌てましたが、ふつうにreplacceすることで対応しました。

    導入する

    以下の通りにやります。 テンプレートエンジン「EJS」とタスクランナー「Gulp.js」で爆速HTMLコーディング | 株式会社LIG

    HTMLファイルに出力する

    ところが上記の記事はちょっと古くて一部情報をアップデートする必要があります。

    HTMLファイルに出力するためには、いろんな情報があったんですが上手くいかなくて、最終的に以下を参照することで成功しました。 gulp-ejs使用時に拡張子を変更してdestする方法 | NxWorld

    まとめ

    これは今この記事を書きながら飲んでる酒です。香りはほぼウィスキー。割らずに飲んでも度数は焼酎並みなので、カスクの弱い版のウィスキーみたいな感じでパカパカ飲めます。コスパ高し。

    シェア
    広告
    野良人 代表
    新免祥太
    1988年岡山生まれ。外食企業のWEB・EC担当を経験したのち、2013年12月より「野良人(のらんど)」の屋号で独立しWEBデザイン・プログラミングなどWEBサイト制作の工程全般を請け負っています。お気軽にご相談ください。
    <次の記事(2018/03/30)
    SIRIUS独自タグ/独自関数
    前の記事>(2018/03/19)
    確定申告の寄附金控除で、住民税の控除対象になる「条例で指定された団体」かどうか調べるのが面倒だった話
    記事一覧