watch機能を使えばファイルの更新後に自動で処理を実行できる

Sassファイルの更新頻度は少なくないため、Sassファイルを更新する度にタスクを手動で実行するのは面倒です。ファイルの更新があったらそのタイミングでタスクを自動で実行できるwatch機能を使うと便利です。

watch機能を使ってSassファイルを自動コンパイルしてみよう

「Sassファイルに変更があった場合に、自動的にCSSにコンパイルするタスク」を例に紹介します。watch機能で使用するのがwatch()メソッドで、「監視するファイル」に変更があった場合、設定された「処理」が実行されます。

  • gulp.watch("監視するファイル", 処理)

style.scssの更新があったら、style.scssをコンパイルするタスクは次のコードです。

// gulpプラグインの読み込み
var gulp = require("gulp");
// Sassをコンパイルするプラグインの読み込み
var sass = require("gulp-sass");

// style.scssの監視タスクを作成する
gulp.task("default", function () {
  gulp.watch("css/style.scss", function () {  // ★ style.scssファイルを監視
    // style.scssの更新があったら、style.scssをコンパイルする
    gulp.src("css/style.scss")  // style.scssファイルを取得
      .pipe(sass({
        outputStyle: "expanded"
      }))  // Sassのコンパイルを実行
      .pipe(gulp.dest("css"));  // cssフォルダー以下に保存
  });
});

▲ 図の★部分がwatch()メソッドを用いている部分です。

コードは、次のURLからも確認できます。

タスクを実行すると、Sassファイルの監視と自動コンパイルが始まります。

gulp

ファイルの監視を終了する場合は、コマンドラインでCtrlCキーを同時に押します。

タスクランナーGulpを積極的に使いこなそう

開発者の負担を減らすGulpは、導入もタスクの作成も簡単です。今回紹介した基本的なことを抑えておけば、開発目的に応じたタスクを柔軟に作成することができます

今回はGulp入門の内容でしたが、続編記事「最低限抑えておきたいタスクランナーの書き方まとめ (GruntとGulpの両方のコードを掲載)」ではGulpを使いこなすためのTipsを、「ブラウザ確認が一瞬! Grunt・Gulpと始めるBrowserSync入門」ではブラウザ確認を楽にするBrowserSyncとの連携を解説しています。是非この機会にタスクランナーの便利さに触れてみてください。

オンライン動画で、もっと丁寧に解説してます

161215_schoo_gulp

また筆者は無料動画学習のSchoo(スクー)で「Gulp入門(全3回)」の講師をしています。Schooの授業では、一つ一つの手順を詳しく動画で解説しているので、コマンドラインが不慣れな方でも安心して学習できます。もし、この記事でわからなかったことや、現場での使い方を知りたい方はご覧くださいませ。

(編集部注*この記事は2014年10月31日に公開された記事を再編集したものです)