grunt-newerをSassのパーシャルファイル更新に対応させた

巷ではgulpが流行っていて、僕も年明けにgulpを試用したりもしていますが、まだしばらくはGruntで良いかと思って使い続けています。

今日は、以前からメンテナンスを続けているプロジェクトをスキャフォールドするgenerator-skywardを更新し、grunt-newerをsassタスクにも適用するようにしました。ただ、そのままの設定だと、パーシャルファイル（例えば、_modules.scss）を更新してもコンパイルが行われなくなってしまいます。

解決方法を探ってみると、GithubのIssueに「Using newer to compile LESS file with imports」が上がっていました。問題の根本は同じようです。さらに、対策方法としてcheckForModifiedImports関数を定義する方法が挙げられていました。

今回はcheckForModifiedImports関数をカスタマイズして利用し、Sassのパーシャルに対応させました。

対応方法

checkForModifiedImports.coffeeのカスタマイズ

主にSassのパーシャルに対応させるために、コード内に記述されている拡張子を変更したり、_を追加したりしました。コードは、 hideki-a / checkForModifiedImports.coffeeにアップしました。

このファイルは、Gruntfile.coffeeと同一階層にlibディレクトリを作成し、その中に保存しました。

Gruntfile.coffeeの変更

関係する所を以下に抜粋します。

sass:defaultの前にnewerを付けたり、newerタスクのoverrideオプションを設定したりしています。また、2行目で先に保存したcheckForModifiedImports.coffeeを読み込んでいます。

'use strict'
checkForModifiedImports = require('./lib/grunt-newer-util').checkForModifiedImports

module.exports = (grunt) ->
  grunt.initConfig
    sass:
      options:
        compass: true
        precision: 3

      default:
        files: [
          expand: true
          cwd: '../htdocs/_scss'
          src: ['*.scss']
          dest: '../htdocs/common/css'
          ext: '.css'
        ]
        options:
          style: 'expanded'
    
    watch:
      sass:
        files: '../htdocs/**/*.scss'
        tasks: [
          'newer:sass:default'
        ]

    newer:
      options:
        override: checkForModifiedImports

  # Load grunt tasks.
  require('matchdep').filterDev('grunt-*').forEach(grunt.loadNpmTasks)

  # Register tasks.
  grunt.registerTask 'default', [
    'newer:sass:default'
    'watch'
  ]

  return;