経緯

フロントを構築するときに面倒くさいSassやCoffeeScriptのコンパイルやらなんやらを自動化できるツールのGrunt。

Gruntのすばらしさはこれだけにとどまらず、もっt様々なことを自動化することができます。

たとえば、地味に面倒くさいCSS変更後のブラウザの更新。デュアルディスプレイにして、片方の画面でブラウザを見ながら、もう一つでコーディングなんていうことをしていると、わざわざ、ブラウザにフォーカスしてCommand+Rという感じ。

Gruntはこの作業も自動化できるので、その方法の紹介。

必要なパッケージのインストール

Gruntはインストールされているものとして進めます。Gruntのインストールや基本的な使い方に関しての詳細はこちらの記事を参考あれ。

grunt-contrib-watchというタスクを使います。

通常、Gruntでは、gruntコマンドを叩くことでGruntfile.jsに記述されたタスクを実行するのですが、このgrunt-contrib-watchを使えば、ファイルの変更を監視して、ファイルが変更されると、自動的にタスクが実行されます。

インストールするためには以下のコマンドをターミナルで叩きます。¹

npm install grunt-contrib-watch --save-dev

Gruntfile.jsの記述

たとえば、test.scssが更新されたときに、test.cssとしてコンパイルし、ブラウザを更新する場合は以下のように追記します。²

module.exports = function(grunt){
  grunt.initConfig({
    sass: {
      dist: {
        options: {
          style: 'compressed'
        },
        files: {
          'test.css': 'test.scss'
        }
      }
    },
    watch: {
      sass: {
        options: {
          // ファイルが変更されたことをブラウザに知らせる
          livereload: true
        },
        tasks: 'sass',
        files: 'css/scss/**/*.scss'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['watch']);
};

ブラウザにアドオンをインストールする

ファイルが変更されたとき、grunt-contrib-watchからファイル変更のお知らせが来て、それを受けてブラウザをリロードします。³

そのために、次のアドオンを入れてやりましょう。自分はGoogleChromeがメインブラウザなので、次のアドオンを使っています。FireFoxなどにも同様のアドオンが存在します。

LiveReload – Google Chromeアドオン ⁴

動かしてみる

ここまで準備できたらOKです。

あとはGruntfile.jsが存在しているディレクトリでgruntコマンドを叩きましょう。すると、コマンドが終了せずに監視モードに入っていることがわかります。

Running "watch" task
Waiting...

次に、ブラウザでページを開き、アドオンのボタンを押します。

最後にwatchしているファイルを更新してみましょう。自動的にブラウザが更新されているはずです。もし、うまくいかなかったら、ターミナルに何らかのエラーが出ていると思うので、確認して修正しましょう。

まとめ

以前はgrunt-contrib-livereloadを別途インストールして、livereload.jsのスクリプトタグを埋め込むということをしていたのですが、grunt-contrib-watchに統合されたことで、より楽に自動更新ができるようになっています。デュアルディスプレイで作業している人にとっては、この設定をすることでおそらく1.5倍くらい実装スピードがあがるのではないでしょうか？