PugとSassをGulpで一緒に自動コンパイルする方法

Node.jsの確認

Nodeがインストールされているか、確認します。

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

node -v

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

npm -v

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

npm init -y

package.jsonが作られます。

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

npm i -D gulp gulp-sass gulp-pug

• Gulp本体
• glup-sass(sassをコンパイルするプラグイン)
• gulp-pug(pugをコンパイルするプラグイン)

これで、Gulpが使える状態になりました。

インストールが完了すると、「node_modules」というフォルダが生成されていると思います。

Sass用にmqpackerをインストール

次にコンパイルした後に、今回の目的であるメディアクエリをまとめるために、下記の4つをインストールします。

一応、そのほかにも便利なものを入れています。

• PostCSS(cssをコンパイルできる)
• mqpacker(メディアクエリをまとめるプラグイン)
• autoprefixer（ベンダープレフィックスを自動付与）
• declaration-sorter（プロパティの順序を揃える）

npm i -D css-mqpacker gulp-postcss autoprefixer css-declaration-sorter

gulp-postcss の autoprefixer エラーが出た場合

gulp-postcss で autoprefixer のバージョン v10 以上を利用するとエラーが発生。

Error: PostCSS plugin autoprefixer requires PostCSS 8.

今回のエラーの原因

• autoprefixer のバージョン v10 以上は postcss のバージョン v8 以上が必要なため
• gulp-postcss が依存している postcss のバージョンが v7 のため

エラーの解決方法

エラーメッセージを確認するとURLが表示されています。

Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users

リンクをクリックすると PostCSS 8 for end users というページが表示され、様々な利用シーンでの解決方法が記載されています。

この記述によると

1. gulp-postcss のバージョンを v9 以上にする
2. postcss をインストールする

というわけで、指示どおりインストールすると解決できました。

npm i gulp-postcss@9.0.0 postcss -D

gulpfile.jsを作成する

フォルダの直下に、「gulpfile.js」というファイルを作成します。

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

// gulpプラグインの読み込み
var { src, dest, watch } = require("gulp");
var sass = require("gulp-sass");
var postcss = require("gulp-postcss");
var autoprefixer = require("autoprefixer");
var mqpacker = require("css-mqpacker");
var cssdeclsort = require("css-declaration-sorter");
var pug = require("gulp-pug");

// Sassをコンパイルする
const compileSass = () =>
  src("sass/*.scss")
    // Sassのコンパイルを実行
    .pipe(
      sass({
        outputStyle: "compressed",
      })
        // Sassのコンパイルエラーを表示
        // (これがないと自動的に止まってしまう)
        .on("error", sass.logError)
    )
    // sassの後に指定
    .pipe(postcss([cssdeclsort({ order: "smacss" })]))
    .pipe(postcss([autoprefixer()]))
    .pipe(postcss([mqpacker()]))
    // cssフォルダー以下に保存
    .pipe(dest("css"));

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

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

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

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

Gulpのタスクを実行して自動コンパイル

npx gulp

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

以上で、PugとSassの自動コンパイルの完了です。

WindowsでSassのコンパイルだけエラーが出た場合

以下のようなエラーが出た場合の対処方法です。

[14:49:55] Starting 'compileSass'...
Error in plugin "gulp-sass"
Message:

gulp-sass 5 does not have a default Sass compiler; please set one yourself.
Both the `sass` and `node-sass` packages are permitted.
For example, in your gulpfile:

  var sass = require('gulp-sass')(require('sass'));

[14:49:55] The following tasks did not complete: default, compileSass
[14:49:55] Did you forget to signal async completion?

Sassのコンパイルだけ失敗するようです。

以下のように対応します。

$ npm i -D sass node-sass

gulpfileのvar sassの行を以下に書き換えます。

var sass = require('gulp-sass')(require('sass'));

これでコンパイルできるようになりました。