GulpでSassとpugを自動コンパイル

参考サイト

絶対つまずかないGulp 4入門（2019年版）インストールとSassを使うまでの手順

↑を読めば十分事足りる感じですが、pugのコンパイルや「Sassとpugの同時監視」について書かれた記事をwebであまり見かけなかったのでメモします。

Node.jsをPCにインストール

Node.jsの公式サイトからダウンロードして、Node.jsをインストール。これでPC全体でNode.jsが使用可能になります。

インストールされた状態なら、以下でバージョン確認ができます。

node -v

npmも使えるようになっています。

npm -v

npmでコンパイル用のモジュールをインストール

プロジェクトのルートに移動して、以下を実行。

npm init -y

package.jsonが作られます。

タスクランナーのGulpと、GulpでSassとpugをコンパイルするためのモジュールを、ローカルにインストールします。

npm install -D gulp gulp-sass gulp-pug

npmでローカルにインストールしたモジュールはnode_modulesフォルダの中に入ります。

Gulpのタスクを作成

プロジェクトのルートにgulpfile.jsを作成します。

この時点で、ディレクトリ構成は以下のようになっているとします。

root/
 ├ dest/
 │  ├ css/
 │  │  └ (ここにhoge.cssが生成されて欲しい)
 │  └ (ここにfuga.htmlが生成されて欲しい)
 ├ src/
 │  ├ css/
 │  │  └ hoge.scss
 │  └ fuga.pug
 ├ node_modules/
 │  └ (npmでインストールしたモジュール)
 ├ gulpfile.js
 ├ package-lock.json
 └ package.json

gulpfile.jsの内容を以下のように記述します。

const { src, dest, watch } = require("gulp");
const sass = require("gulp-sass");
const pug = require("gulp-pug");

// Sassをコンパイルする
const compileSass = () =>
   src("src/css/*.scss")
   .pipe(
       sass({
           outputStyle: "expanded"
       })
   )
   .pipe(dest("dest/css"));

// Sassファイルを監視
const watchSassFiles = () => 
  watch("src/css/*.scss", compileSass);

// pugをコンパイルする
const compilePug = () =>
   src("src/*.pug")
   .pipe(
       pug({
           pretty: true
       })
   )
   .pipe(dest("dest"));

// pugファイルを監視
const watchPugFiles = () =>
   watch("src/*.pug", compilePug);

// npx gulpで実行される関数
exports.default = () =>
   watchSassFiles();
   watchPugFiles();

Gulpのタスクを実行

npx gulp

を実行した状態でhoge.scssやfuga.pugが更新されると、自動でコンパイルされてdestディレクトリ以下にcssやhtmlが生成されます。

Ctrl+Cで監視を止めることができます。