今回はSassの環境構築と、合わせて良く使われるタスクランナーの導入手順についてです。
SassはCSSの機能を拡張したメタ言語で、Sass記法とScss記法の２種類があります。
一般的に良く使われているのはScss記法と言われています。
Sassで記述したファイルはそのままではCSSとして認識されません。そのためCSSへコンパイル（変換）する必要があります。そこで活躍するのがタスクランナーと言う訳です。
タスクランナーとは、コンパイルや画像の圧縮、ファイルの変更の監視などを自動化してくれるツールです。Sassで書かれたファイルを都度CSSにコンパイルするのは面倒な為、タスクランナーを使ってSassファイルに変更があった際に自動でCSSにコンパイルするようにします。
ここでは、制作現場でも良く使われているGulpの導入手順を解説していきます。
１．Node.jsのインストール
JavaScriptの実行環境であるNode.jsをインストールします。
推奨版と最新版の二つがありますが、特に何もなければ推奨版をインストールしてください。
Node.js公式
https://nodejs.org/ja
インストール完了後、PowerShellもしくはターミナルを開き以下コマンド入力。バージョンが確認できればOK
> node -v２．package.jsonの作成
package.jsonとはインストールするパッケージが記載されたファイルになります。npm install コマンドによってこのファイルに記載されたパッケージがインストールされます。環境の移行の際などにこのファイルがあれば楽と言う事です。
任意の場所にプロジェクトフォルダを作り、そのフォルダに移動します。（今回はCドライブ直下にprojectと言う名前のフォルダを作ると想定）
PowerShellもしくはターミナルを開き以下コマンド入力。
> cd c:/
> mkdir project
> cd projectprojectフォルダに移動したら、下記コマンドを入力。projectフォルダ内にpackage.jsonファイルが作成されます。
> npm init -y３．gulp、sass、gulp-sassのインストール。
下記のコマンドを入力してGulp本体、Sassコンパイラ、連携用のgulp-sassを一括インストールします。
> npm install -D gulp sass gulp-sassprojectフォルダ内にnode_modulesフォルダが作成され各パッケージがインストールされます。
以上でSassファイルをコンパイルするための必要な依存関係が揃います。
４．タスクの作成
Gulpを使ってコンパイル、ファイルの変更の監視などを行うには、gulpfile.jsと言うファイルを作成します。このgulpfile.jsにタスク（処理）を記述して自動化させます。projectフォルダ内にgulpfile.jsと言う名前でファイルを作り、エディターで開いて処理を記述していきます。下記は記述の一例です。
// gulpを読み込みます
const { src, dest, watch } = require("gulp");
// Sassを読み込みます
const sass = require("gulp-sass")(require("sass"));
// コンパイルするタスク
const sassCompile = () =>
// scssのファイルパス
// 複数ファイルの場合、拡張子前にアスタリスクを使用
src("src/scss/*.scss")
// コンパイル実行
.pipe(
sass({
outputStyle: "expanded"
})
)
// 変換したCSSの出力先
.pipe(dest("src/css"));
// Sassファイルを監視し、変更があったらSassを変換
// 複数ファイルの場合、拡張子前にアスタリスクを使用
const watchSass = () => watch(['src/scss/*.scss','src/scss/**/*.scss'], sassCompile);
// npx gulpコマンドでwatchSassを実行
exports.default = watchSass;上記のgulpfile.jsをザックリ説明すると、PowerShellもしくはターミナルでprojectフォルダ内に移動し、npx gulpコマンドを入力することによって、watchSassのファイル監視がスタートし、ファイルの変更があった際にコンパイルが実行されると言う感じになります。
以上でSass環境構築とタスクランナーの導入が完了となります。Sassファイルを編集する際は必ずprojectフォルダでnpx gulp コマンドを実行後に編集を行うようにしましょう。ファイル監視をスタートさせていないと変更しても出力先フォルダに変換が反映されないので注意してください。
