【Gulp】watch()メソッドでSass(SCSS)を自動コンパイル

メタ言語の続きです。前回はMarkdownをGulpにコンパイルしました。コンパイル系でやってみたいことはある程度やれたので次は常時監視をやってみます。コンパイルを毎回実行するのは手間なのでファイルを修正するたびに自動的にコンパイルする仕組み。watch()メソッドを使います。それでは行ってみましょう！

【目次】

watch()メソッドとは
Sass(SCSS)のおさらい。
watch()メソッドを追記
自動コンパイル実行！
Sass(SCSS)を更新してみる
ワイルドカードでファイル名を汎用的にする
複数ファイルにしてみる
最後に

前回記事
※参考：【HTML】MarkdownをGulpでHTMLにコンパイルしてみる - クモのようにコツコツと

※参考：メタ言語（HTMLテンプレートエンジン、AltCSS、AltJS）まとめ qiita.com

watch()メソッドとは

watch()メソッドファイルを修正するたびに自動コンパイルするために、常時監視するメソッド。

※参考：watch() | gulp.js

このような書き方。

gulp.watch( ファイル名, 処理 );

Sass(SCSS)のおさらい。

前回のSass(SCSS)の記事で作ったコードを自動コンパイルにしてみる。

f:id:idr_zz:20191217092138p:plain Sass(SCSS)がCSSにコンパイルされてこのような見た目になっている。

前回のコード（gulpfile.js）

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

gulp.task('sass',  () => {
    return gulp
        .src('css/common.scss')
        .pipe(sass({
                    outputStyle: 'expanded'
                })
            )
        .pipe(gulp.dest('css'));
});

詳細はこちらを参照。

※参考：【CSS】Sass（SCSS）をGulpでコンパイルしてみる - クモのようにコツコツと

watch()メソッドを追記

前回参考にしたこちらの記事の後半にwatch()メソッドの自動コンパイルも触れられている。

※参考：絶対つまずかないGulp 4入門(2019年版) - インストールとSassを使うまでの手順 - ICS MEDIA

これをもとにコードを書き換えてみる。

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

gulp.task('sass',  () => {
    return gulp.watch("css/common.scss", () => {
        return gulp
        .src('css/common.scss')
        .pipe(sass({
                    outputStyle: 'expanded'
                })
            )
        .pipe(gulp.dest('css'));
    });
});

処理のコードをreturn gulp.watch("ファイル名", () => { });の中に入れる
エラー対策で.on("error", sass.logError)を追加

.on("error", sass.logError)がなくてもwatch()は動くが、これがないとSassのコードにエラーがある時にwatch()が止まってしまうらしい。

※参考：gulp-sass のエラー時に gulp タスクを止めない為の方法 - HAM MEDIA MEMO

自動コンパイル実行！

いよいよ、自動コンパイルを実行する。

ターミナルのcdコマンドでフォルダに移動して

cd /（フォルダ）/gulp_sass

コマンドを実行！*1

npx gulp sass

するとこんなログが表示された

[07:24:04] Using gulpfile ~/（パス）/gulp_sass/gulpfile.js
[07:24:04] Starting 'sass'...

Startingということでもう監視は動いている模様。頭の[ ]は時間だな。

Sass(SCSS)を更新してみる

ということでSCSSのスタイルを書き換えてみよう。common.scssを開いて…

#oya {
  /*中略*/
  h2 {
    color: blue;
    font-size: 1.5em;
    line-height: 1.2;
    }

h2タグを青から緑にしてみるか。

#oya {
  /*中略*/
  h2 {
    color: green;
    font-size: 1.5em;
    line-height: 1.2;
    }

と。

ページをリロードすると… f:id:idr_zz:20200401073014j:plain おお！h2タグが緑色になったぁ〜〜！！

ワイルドカードでファイル名を汎用的にする

よくCSSやJSで汎用的な表現としてワイルドカードがある。*で「全ての」みたいな。正規表現と似たやつ。

※参考：javascriptで配列内の要素をワイルドカードを使って検索する | cupOF Interests

これを使ってwatch()の監視ファイル名を汎用的にしてみる。

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

gulp.task('sass',  () => {
    return gulp.watch("css/*.scss", () => {
        return gulp
        .src('css/*.scss')
        .pipe(sass({
                    outputStyle: 'expanded'
                })
            )
        .on("error", sass.logError)
        .pipe(gulp.dest('css'));
    });
});

watch()の第一引数のファイル名を*.scssに
.src()のファイル名も*.scssに

これでも動くかやってみる。

念のため一回、watch()を停止しておく。「Control+C」でできた。

※参考：gulp|watchやlivereloadのタスクを停止する方法

もう一回起動！

npx gulp sass

今後はh2タグをオレンジにしてみる。

#oya {
  /*中略*/
  h2 {
    color: orange;
    font-size: 1.5em;
    line-height: 1.2;
    }

リロードすると… f:id:idr_zz:20200401074541j:plain オレンジになった！

ワイルドカードでもいける。これで多分複数ファイルに対応できるのではないかと。

複数ファイルにしてみる

「other.scss」というファイルを作り、h1タグの内容はこちらに移植してみる。

#scss h1 {
    color: red;
    font-size: 2em;
  }

保存したら「other.css」というファイルが作られた！

#scss h1 {
  color: red;
  font-size: 2em;
}

「other.css」をHTMLにリンクしていないので一旦スタイルは外れるが f:id:idr_zz:20200401080059j:plain

headタグに「other.css」のリンクを追加すると…

<head>
   <meta charset="UTF-8">
   <title>初めてのSass(SCSS)コンパイル</title>
   <link rel="stylesheet" href="css/common.css">
   <link rel="stylesheet" href="css/other.css">
</head>