Sassの学習に便利！UnderscoresでWordPressテーマ作成（gulp4 環境構築編）

しばらく前からSassを勉強しなきゃなと思ってはいたのですが、何から始めれば・・・と思案していたところ、Sassが導入されているWordpressのスターターテーマでオリジナルテーマを作れば、作りながら学習できる！と思い、やってみました。
これからSassを勉強したいな！という方の参考になればと思います。

本来なら、Sassの環境構築を行ってから、Wordpressの環境構築を行う流れが自然だと思いますが、Sassのコンパイルを行うgulpをプロジェクトフォルダ内にローカルインストールするため、Wordpressの環境構築（プロジェクトフォルダ作成）→Sassの環境構築　という手順でご説明します。

WordPressのローカル環境構築

Localで開発環境を作成

まず、Wordpressのテスト環境をローカルに作るわけですが、「Local by Flywheel」が便利ですね。
xampよりインストールも設定も超簡単で、あっという間にローカルにWordpressのテスト環境ができてしまいます。
インストール手順や設定方法は、いろんな方が書かれているので省略します。

デフォルト設定だと、

C:\ユーザー/ユーザー名/Local Sites/プロジェクト名/app/public

配下にWordpressがインストールされます。

スターターテーマ「Underscores」のインストール

WordPressのスターターテーマはいろいろありますが、フレームワークも入っていない、殆ど真っ白状態の「bones」や「_s(Underscores)」が一からデザインする（＝Sassのいろいろなパターンを勉強する）にはもってこいだと思います。
ただ「bones」は最近更新されていないのと、「Underscores」の方がSassのフォルダ構成が分かりやすいので、今回は「Underscores」を使うことにしました。
公式サイトで、テーマ名を入力し、「Advanced Options」をクリックします。

すると、さらに設定できる項目が出てきます。これは特に入れなくてもよいのですが、一番下のチェックボックス「_sassify!」にチェックを入れます。

「GENERATE」ボタンを押すと、入力したテーマ名のzipファイルがダウンロードされます。
これを管理画面の「外観」ー「テーマ」からアップロードします。

「Underscores」のSassファイル構成

下図のように、UnderscoresのSassフォルダ配下は、さらに機能やレイアウト構成毎のフォルダで分けられています。

この各フォルダの下には、さらに細分化されたパーシャルと、それをimportしてまとめるパーシャルが入っています。style.scssは、この各フォルダのまとめのパーシャルと、フォルダ外にある_nomalize.scssをimportする構成になっています。

これだけでも、Sass初心者には、めっちゃありがたいですよね。
Sassってこういう風にファイルを区分すればいいんだぁってのが分かるし、自分がデザインする際は、パーシャル毎に追加、修正や、パーシャル自体も追加してimportすればいいんです。
部品化することで、変えたい部分のコードがどこにあるか、すぐに分かるというSassの醍醐味を味わえますね！

Sassの環境設定

それでは、Sassを使える状態にしましょう。
Ruby Sassは、2019年3月にサポート終了となったので、node-sass(LibSass)を使います。

Node.jsとnode-sassのインストール

node-sassを動かすためには、Node.jsが必要です。
下記サイトからLTS（推奨版）をダウンロード後、インストールします。

https://nodejs.org/ja/

Windowsの場合、コマンドプロンプト（黒い画面）（Macはターミナル）で、バージョン確認します。
下記コマンドを入力し、エンタキーを押下。

node -v

バージョンが表示されたら、インストール成功です。（執筆時は、v10.16.3）

次に、node-sassをインストールします。
下記コマンドを入力し、エンタキーを押下。

npm install -g node-sass

同様に下記コマンドでバージョンが表示されたら、インストール成功です。（執筆時は、4.12.0）

node-sass -v

package.jsonの作成

コマンドプロンプトでプロジェクトフォルダ（今回は、Wordpressのテーマフォルダ）に移動します。
「cd フォルダまでのパス」を入力し、エンタキーを押下。

cd C:\Users\･･･\wp-content\themes\asuiro

パスの手入力が大変な場合は「cd 」と入力した後で、フォルダをドラッグしましょう。

以下のコマンドを打ち、テーマフォルダ直下に、プロジェクトの名前やバージョンなどが入ったpackage.jsonを作成します。

npm init -y

package.jsonの中身はこんな感じです。
プロジェクト名やバージョンなど、修正可能です。

{
  "name": "asuirow",
  "version": "1.0.0",
  "description": "[![Build Status](https://travis-ci.org/Automattic/_s.svg?branch=master)](https://travis-ci.org/Automattic/_s)",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

gulp4のインストールとgulpfile.jsの作成

ブラウザ上で表示するためには、SassをCSSにコンパイルする必要があります。
でも、細分化されたパーシャルを修正する度に、いちいちstyle.scssを手作業でコンパイルして、画面確認なんてやってられません。そこで、gulpの登場です。

gulpは、いろいろな処理（タスク）を自動化してくれるタスクランナーです。
今回は、Saasのコンパイルを自動化し、ベンダープレフィックスの付与、CSSの圧縮なども自動で行ってくれる便利ツールとして使用します。
最近はWebpack（こちらはビルドツールと言いますが）派が多いようですが、使い方は似たようなもんなので、gulpを一度触っておけば、Webpackもすんなり入れると思います。

黒い画面とか、ファイルの直接編集なんて面倒という方は、GUIソフト（Koalaとか）やエディタのパッケージなどがお手軽ですが、gulpの方が機能が豊富で、きれいなコードをコンパイルしてくれます。
私も当初、Atomのsass-autocompileでいいかなぁと思ったのですが、セレクタ毎に指定したメディアクエリがそのまんまCSSにコンパイルされていて、これ、プロジェクト終わる頃には、めっちゃCSS膨らむわと思い、メディアクエリをまとめる機能がないか探しましたが、見つからず・・・。

で、gulpの方法を見ると、ばっちしできるじゃん！
gulpというか、PostCSSというNode.js製のCSS変換ツールの機能なんですが、このパッケージで、メディアクエリをまとめたり、ベンダープレフィックスの付与他、もろもろやってくれるんですね。
ちなみに、WebpackでもPostCSSが使えるみたいなので、gulpと同機能のはずです。

では、gulpをインストールしましょう。
以下は、gulpのローカルインストールコマンドです。プロジェクトフォルダ直下の開発環境にインストールできます。

npm install -D gulp

続けて、Sassコンパイル用のパッケージgulp-sassもインストールします。

npm install -D gulp-sass

ここで、package.jsonを開くと、”devDependencies”の項目が追加されます。

"devDependencies": {
    "gulp": "^4.0.2",
    "gulp-sass": "^4.0.2"
}

次にタスクを記載するgulpfile.jsをpackage.jsonと同じフォルダに作成し、以下を記載します。
gulp-sassのnpmサイトにコード記載例があるのですが、ここに書かれているtask()メソッドの使用がgulp.js側で非推奨となっているため、こちらの記事を参考にさせて頂きました。

参考：https://ics.media/entry/3290/

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

const compileSass = () =>
  src('./sass/**/*.scss')
    .pipe(sass({outputStyle: "expanded"}))
    .pipe(dest('../asuirow'));

const watchSassFiles = () => watch('./sass/**/*.scss', compileSass);
exports.default = watchSassFiles;

内容説明は下記となります。

1. requireでgulpとgulp-sassを呼び出す
2. /sass/フォルダ配下にある全ての拡張子.scssのファイルを’expanded’形式でコンパイルし、/asuirow/配下に出力
3. /sass/フォルダ配下にある全ての拡張子.scssのファイルを監視し、変更があったら、②の処理を行う

sassのoutputStyleオプションは、CSSの出力形式で、以下の４種類あります。

通常、開発時は”expanded”で見やすい形にして、本番環境では、”compressed”で容量を圧縮するかと思います。

package.jsonとgulpfile.jsを作成したら、コマンドプロンプトに戻り、テーマフォルダ配下で以下のコマンドを打ち、タスクを実行します。

npx gulp

しばらくして以下の表示がされると、Sassファイルは常時監視状態になります。

[16:25:44] Using gulpfile ~Local Sites\asuirowtheme\app\public\wp-content\themes\asuirow\gulpfile.js
[16:25:44] Starting 'default'...

試しに、Sassフォルダのパーシャルファイルを変更して保存してみましょう。

[16:36:56] Starting 'compileSass'...
[16:36:58] Finished 'compileSass' after 1.7 s

上記のようなコマンドが表示され、Sass直下のstyle.cssの日付が変更されていれば、無事タスクが実行されました。
どんなふうにコンパイルされているかも見てくださいね。

タスクを終了させるには、「Ctrl」＋「c」を押すと、終了するか聞かれるので、「y」を押下します。

その他便利なパッケージのインストールとタスクの追加

gulpのタスクに追加できる便利なパッケージをインストールします。
まず、Chromeの開発者ツールなどで、コンパイル前のSassファイルの行数を表示するためのソースマップを作成する「gulp-sourcemaps」をインストールします。

npm install -D gulp-sourcemaps

Sassの記述ミスなどによるコンパイルエラー時に監視（Watch）を停止して、再度コマンドを入力しないでよいよう自動コンパイルを継続させるためのパッケージ「gulp-plumber」をインストールします。

npm install -D gulp-plumber

エラー時に通知を出して、修正箇所を教えてくれるパッケージ「gulp-notify」をインストールします。

npm install -D gulp-notify

続けてPostCSSと便利なパッケージをインストールします。
まず、「gulp-postcss」をインストール

npm install -D gulp-postcss

ベンダープレフィックスを自動付与する「Autoprefixer」のインストール

npm install -D autoprefixer

Sassではセレクタ毎に、ネストでメディアクエリを記述できとってもラクですが、そのままコンパイルするとメディアクエリもバラバラに記述されたままで、容量は膨らむわ、コードは汚いわ、になってしまいます。
そんなバラバラになったメディアクエリをまとめてくれる「CSS MQPacker」のインストール

npm install -D css-mqpacker

まだまだ便利なパッケージはありますが、とりあえずこれだけ入れて、gulpfile.jsにタスク処理を追加します。

const { src, dest, watch } = require('gulp');
const sass = require("gulp-sass");
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const mqpacker = require('css-mqpacker');

const compileSass = () =>
  src('./sass/**/*.scss')
    .pipe(plumber({ errorHandler: notify.onError('Error: <%= error.message %>') }))
    .pipe(sourcemaps.init())
    .pipe(sass({outputStyle: "expanded"}))
    .pipe(postcss([autoprefixer()]))
    .pipe(postcss([mqpacker()]))
    .pipe(sourcemaps.write(''))
    .pipe(dest('../asuirow'));

const watchSassFiles = () => watch('./sass/**/*.scss', compileSass);
exports.default = watchSassFiles;

PostCSSの処理は、Sassのコンパイル後に行うため、sassの後に記載します。
追加したら、gulpfile.jsを保存し、先ほどのgulpのタスクをいったん終了します。

再度、「npx gulp」コマンドでタスクが開始されます。
処理に追加したタスクが実行されているか、Saasファイルを編集、保存して確認してみてください。

問題なければ、これでSaasでのテーマ作成準備が整いました～！
準備編だけで終わってしまったー

次回は、「Underscores」のSassファイルの詳細などについても書いてみたいと思います。