クモのようにコツコツと

フロントエンドエンジニア イイダリョウの技術ブログ。略称「クモコツ」

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

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

【目次】

前回記事
※参考:【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>

h1タグのスタイルが復活! f:id:idr_zz:20200401074541j:plain

まあこの方法だとファイルを増やすたびにhtmlタグにリンクを追加する必要がある。

そのたえ実用的にはモジュール設計(SCSSファイル同士をインポートして一つのCSSに統合)が必要に感じた。@importを使うとできそう。

※参考:SCSS ファイルから別の SCSS ファイルをインポートする (@import) | まくまくSassノート

CSSのモジュール設計についtは今後のテーマということで…。

最後に

ということで、watch()監視による自動コンパイルを体験してみました。これはとても楽ですね!

これを踏まえて次にやってみたいテーマ。

  • AltJSやHTMLテンプレートエンジンも常時監視で自動コンパイルする
  • AltCSS、AltJS、HTMLテンプレートエンジンなどの複数のメタエンジン同士を合体させた状態で自動コンパイルする
  • 複数のSass(SCSS)から一つのCSSファイルを作るCSSモジュール設計

テーマの大きさ的には先にメタ言語同士の合体をやってみて、次にモジュール設計に入りたいと思います。モジュール設計はAltJS、HTMLテンプレートエンジンでも習得したいテーマです。

それではまた!


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

*1:今回はタスク名はsassのままだがdefaultにしておくとタスク名が省略できるらしい