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

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

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

「Sassファイルに変更があった場合に、自動的にCSSにコンパイルするタスク」を例に紹介します。

次の動画はこのページで解説する手順をまとめたものです。もしわからないことがあれば動画を見直してください。

watch機能で使用するのがwatch()メソッドで、「監視するファイル」に変更があった場合、設定された「処理」が実行されます。

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

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

▼gulpfile.jsファイル

// Sassのコンパイルタスクのサンプルファイルです。
 
// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
 
// style.scssの監視タスクを作成する
gulp.task('default', function () {
  // ★ style.scssファイルを監視
  gulp.watch('css/style.scss', function () {
    // style.scssの更新があった場合の処理
 
    // style.scssファイルを取得
    gulp.src('css/style.scss')
      // Sassのコンパイルを実行
      .pipe(sass({
        outputStyle: 'expanded'
      })
      // Sassのコンパイルエラーを表示
      // (これがないと自動的に止まってしまう)
      .on('error', sass.logError))
      // cssフォルダー以下に保存
      .pipe(gulp.dest('css'));
  });
});

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

タスクを実行すると、Sassファイルの監視と自動コンパイルが始まります。自動コンパイルについては冒頭の動画を見ると挙動がわかりやすいでしょう。

▼コマンドライン

npx gulp

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

このページで解説したサンプルコードは、次のURLからも確認できます。

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

Gulpの導入はこのような手順となります。今回紹介した基本的なことを抑えておけば、開発目的に応じたタスクを柔軟に作成することができます

今回はGulp入門の内容でしたが、続編記事「最低限抑えておきたいタスクランナーの書き方まとめ (GruntとGulpの両方のコードを掲載)」ではGulpを使いこなすためのTipsをまとめています。Gulpはいろんな使い方ができるので、必要に応じて調べて使っていくことになるでしょう。そのときに参照してもらえたら幸いです。是非この機会にタスクランナーの便利さに触れてみてください。

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

161215_schoo_gulp

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

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