【2021年版】web制作のためのGulp×EJS×Sass(.scss)環境構築(Windows,Mac対応)

web制作のためのGulp×EJS×Sass(.scss)環境構築【2021年版】 HTML / CSS
この記事は約6分で読めます。
スポンサーリンク

どうも上かるびです。

以前、gulpの設定について下記の記事を書いたのですが、導入しようとしてくださった方から「上手くいきません」というご連絡をいただきました。

ネコーダー
ネコーダー

ごめんやで。

改めて見てみるとNode.jsのバージョンなど記載していなかったので、もっと分かりやすく&詳しく書き直そうと思い立ちました。

上かるび
上かるび

せっかくなのでテンプレートエンジンのEJSを導入してみました。お好みに合わせてお使いください。

今回の環境でgulpを走らせると構築されるサイト↓

まだMacでの動作確認テストを行っておりません。テストしてみて不具合があれば修正します。
(※2021年10月15日 追記)Macでも動作確認できました。

本記事を読むのにおすすめの方

  • gulpの導入は理解したけれど、どのようなセッティングにしようか迷っている方
  • gulp使ってるけど、他人のgulpも見てみたい
  • EJS対応のgulpを使いたい

逆に以下に当てはまる方は、本記事を読まずにもっと有益な記事を探すことをおすすめします。

  • gulpを卒業して今はwebpackを使っている
  • 普段のweb制作ではVueやReactなどのフレームワークを使っている
「タスクランナー?gulp?分からないけど導入してみたい!」という方はまずは下記のページで概要をつかむことをおすすめします。

本記事のgulpでやること・やらないこと

やること

  • ejsファイルのコンパイル・整形・コメントの削除
  • scssファイルのコンパイル(ベンダープレフィックス付与、メディアクエリをまとめる)・圧縮
  • jsの変換(Babel)・圧縮
  • 画像(jpg,png,gif,svg)の圧縮
  • Webp形式への変換
  • ローカルサーバーで確認&自動反映
  • コンパイル・圧縮しないファイルのコピー(外部ライブラリのスタイルシートやスクリプト、ローカルフォントなど)
  • 出力先のフォルダの削除

やらないこと

  • scss,cssのプロパティのソート(記述順序の変更)
  • jsファイルのバンドル
  • 出力先のフォルダ、ファイルを自動で削除
  • FTPを使用した自動アップロード
  • WordPress関連の処理

Gulp×EJS×Sass環境構築について

こちらの環境を構築した際の環境は下記の通りです。
Node.jsのバージョン:14.18.0
npmのバージョン:6.14.15

バージョンが違う場合のエラーに関しては、各自でご対応お願い致します。
また手動でパッケージをインストールする場合、バージョンが異なると動作しない可能性があります。その場合に関しても対応できませんので、何卒よろしくお願いします。

まずはディレクトリ構造やコードを一気に公開します。

そのあとに解説や注意事項を入れていきます。

上かるび
上かるび

すぐに使わしてくれぃ!禁断症状が出ちまうぜぃ!という方は目次より「ダウンロード・インストール」の項目に飛んでください。

ディレクトリ構造

ejsの動作確認のため、aboutという下層ページを設けております。

またその他CSSやJavaScriptのコンパイル確認のため、無理やりgridを使ったり、jQueryをCDNで読み込んでいたりします。実務に取り入れる際は、ある程度カスタマイズすることをおすすめします。

gulp.js

基本的にはコメントアウトで説明を入れています。

※ejsコンパイル前に出力先を削除する処理でエラーを見つけたので、その処理は一旦外しております。(2021年10月13日)

 

出力先のファイル削除について

gulpはsrcからファイルを削除しても、public(出力先)からは消えません。

アップするときや納品する際は余計なファイルを削除したいので、直前にcleanAllですべて削除してまたgulpを走らせる、みたいな処理を行います。

ただ今回、HTMLファイルに関しては、コンパイル前にHTMLのフォルダとファイル(assets以外)を削除する処理をしています。

cssやjs、imageやfontsに関しても同様にしたい場合は、HTMLの処理を参考にカスタマイズしてみてください。(もし分からなかったらご相談ください。)

EJSのディレクトリ構造について

今回のgulpではEJS初心者が分かりやすいように、共通パーツをすべて「includes」フォルダに入れております。

こちらはお好みで「components」や「laylouts」など、CSS設計やフレームワークチックにカスタマイズしてもよいと思います。

Sassのコンパイルについて

今回はコンパイルのオプションでcompressedを使っています。ただ納品後に他の誰かがCSSファイルを編集する場合は、expandedなど他のオプションを指定することをおすすめします。

またメディアクエリをまとめる際に、多くの方がcss-mqpackerを使っていますが、こちらは非推奨とされています。

ですので代わりにgulp-group-css-media-queriesを使ってます。

ただ残念ながらこちらのパッケージを使用すると、なぜか自動で整形されてしまいます。

私の場合、基本的に納品後に先方が修正することはない案件ばかりなので、最後にCSSを圧縮するcssNano()という処理を走らせています。

もしコンパイルオプションをexpandedなどにしている場合は、こちらのcssNano()の処理は削除またはコメントアウトすれば圧縮されません。

ダウンロード・インストール

①下記ファイルをダウンロード、解凍します。

②解凍したフォルダをVSCodeで開き、ターミナルで「npm i」のコマンド実行

VSCodeの場合、ctrl + J(command + J)でパネルが開くので、そこからターミナル→「npm i 」でエンターです。
③そのあとは「npx gulp」のコマンドでエンターキーを打てば、gulpが走り、publicフォルダが生成され、コンパイル&自動でローカルブラウザが立ち上がります。
止めたいときはVSCodeを閉じるか、ターミナル画面でCtrl + C(command + C)です。

 

今回の環境を試しに使ってみて、記述がおかしい、動作がおかしいなどありましたら、お気軽にコメントしていただければと思います。

ネコーダー
ネコーダー

レビューみたいな感じもドンと来い!

コメント

タイトルとURLをコピーしました