【gulp V4系】sassを自動でコンパイルするgulpfile.jsを書く

はじめに

数年前、以下の記事を投稿した。

現在、「gulp」はV4系がリリースされている。また、「gulpfile.js」で「gulp.task()」の記述が非推奨になっており、この記事はかなり古い情報と化していた……。
今回も何番煎じかわからないが、「gulp」のV4系でsass(scss) を自動コンパイルできるようにした。

環境

以下は、参考まで。

• OS：Windows 10
• Node.js：v14.15.0

インストール

コマンドプロンプトにて、「npm」コマンドでインストールする。
予め「npm init」を実行し、「package.json」を作成しておく。

始めに、「gulp」をグローバルインストールする。

npm install -g gulp

次に、「package.json」のあるフォルダで「gulp」をローカルインストールする。
また、今回は、V4系の「gulp」をインストールするので、バージョンを指定し、ローカルインストールする。

npm install --save-dev gulp@4.0.2

「gulp-sass」と「sass」も併せてローカルインストールする。

npm install --save-dev gulp-sass sass

gulpfile.js

「gulpfile.js」を作成する。
sass(scss) ファイルの格納場所や、コンパイルで生成されたcss ファイルの出力先などの設定を記述する。

gulpfile.js

// 本体とプラグインの呼び出し
const { src, dest, watch } = require('gulp');
const sass = require('gulp-sass')(require('sass'));

// 監視ファイルと出力先フォルダ
const srcPath = 'sass/**/*.scss';
const distPath = 'css';

// コンパイル処理
const compileSass = () => {
    return src(srcPath)                            // 監視ファイル
        .pipe(sass({ outputStyle: 'compressed' })  // 出力形式はcompressed
            .on("error", sass.logError)            // sassのコンパイルエラー表示
        )
        .pipe(dest(distPath))                      // 出力先フォルダ
}

// sassの常時監視、変更があったら変換する
const watchSass = () => {
    watch(srcPath, compileSass);
}

// タスクの実行
exports.default = watchSass;

コンパイルタスクと常時監視タスクはメソッドにし、「exports.default」でタスクを実行する。

gulp の実行

コマンドプロンプトで「package.json」があるフォルダへ移動。
「gulp」で実行する。
実行後、sass(scss) ファイルの監視が始まり、sass(scss) ファイルに何かしらの変更があるとコンパイルする。

D:\Myproject>gulp
[18:42:13] Using gulpfile D:\Myproject\gulpfile.js
[18:42:13] Starting 'default'...
[19:13:08] Starting 'compileSassFile'...
[19:13:09] Finished 'compileSassFile' after 1.55 s
[19:13:16] Starting 'compileSassFile'...
[19:13:16] Finished 'compileSassFile' after 162 ms

参考URL

ありがとうございました。