2022年4月15日しがないWebエンジニアgulp-ejsの使い方が知りたいぞ。実践してやり方を把握しておきたい。こんな方向けに、本記事ではサクッと実践できるgulp-ejsの使い方を解説していきます。普段からgulpをバリバリ使っている方にとっては、EJSのコンパイルもgulpでできればと思うかも。そんな方向けに、今回はnpmパッケージの「gulp-ejs」を使ったコンパイル方法を解説していこうと思います。いうわけで早速やっていきましょう!目次gulp-ejsを使ってEJSをコンパイルする方法gulp-ejsをインストールするgulpfile.jsの準備EJSファイルの準備gulp実行!【まとめ】gulp-ejsで業務を効率化しよう関連記事はこちらgulp-ejsを使ってEJSをコンパイルする方法gulp-ejsをインストールするまずは任意のプロジェクトファイルを準備します。準備したコードエディタで開くかターミナルでcdし、下記コマンドを実行します。-yこれでプロジェクト内にpackage.jsonが追加されました。続いて、gulp本体とgulp-ejs、それからコンパイルファイルの名前を変えてくれる「gulp-rename」をインストールしていきましょう。gulp-renamegulpfile.jsの準備お次に、gulpfile.jsを用意します。下記コードをまるっとコピペでOK。!(_)はコンポーネントファイル(_header.ejsなど)以外の意味。gulp.series(compileHtml);めちゃくちゃ短いですが、動きを掴みたいときはこれでOKかも。下準備はこれでOKです。ejsディレクトリを作ってその中にejsファイルを置きます。(ディレクトリ構造はご自身の環境に合わせてください。)適当にindex.ejsを作ってEJS構文でなにか書いてみます。%></p></body></html>変数のtitleはgulpfile.jsから渡している値です。default上記コマンドをターミナルから実行します。するとdestディレクトリが生成されて、index.htmlが生成されているはずです。htmlファイルの中身は以下の通り。<p>hello</p></body></html>きちんとコンパイルされました!【まとめ】gulp-ejsで業務を効率化しようというわけでメチャクチャ簡単でしたね。今回は以上になります。実際に使う際には、watchで自動監視をつけるなどすると思うので、そのあたりも後々追記していこうと思います。コメントをキャンセルメールアドレスが公開されることはありません。※サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。上に表示された文字を入力してください。【2分で実践】XDで画面下固定フッターを作成する方法サイト管理人づみ元工場勤務のWebディレクター。現在はWeb制作会社に勤めながら兼業でWeb制作事業を営んでいます。工場退職→フリーのWebライターに転身。→コーディング・プログラミングを独学で学ぶ→Web制作会社に入社。兼業でWeb制作事業。