2013/06/12更新

[grunt] Compass(Sass)のマルチスレッドコンパイルができるgrunt-compass-multipleに、ファイルの個別指定オプションが追加

こんにちは、@yoheiMuneです。
以前ブログでご紹介させて頂いた、compassをマルチスレッドで実行してコンパイル時間を短縮するgrunt-compass-multiple。このたび、機能の追加を行いました。その内容をご紹介させて頂ければと思います。

grunt-compass-multipleって何？

grunt-compass-multipleはgruntのカスタムタスクで、 Compass(詳細は、こちら)のコンパイルを、マルチスレッドで行うことができるようになるツールです。
通常Compassのコンパイルはシングルスレッドで行われますが、そーすると大きなプロジェクトではコンパイルが10秒とかかかる場合もしばしば。
10秒もコンパイルにかかると、gruntのwatchタスクなどに組み込んだ際に、「待つ」という行為をしなきゃいけなくてイライラ。。

そのイライラを少しでも改善したいということで、マルチスレッドでコンパイルすることで、コンパイルの総時間を短縮するという仕組みです。
詳細は、こちらのブログで紹介させて頂きましたので、ご参考になれば幸いです。

今回追加した機能（Scssファイルを指定してのコンパイル！！）

今回のアップデートで、各種PullRequestの取り込みやバグの修正も行いましたが、以下の機能追加が一番の目玉です。

Scssファイルを指定して、そやつのみをコンパイルできるようになる！

gruntのCompassタスクでは、コンパイル対象をScssDirとしてディレクトリとして指定できます。
しかし時として、以下のようなディレクトリのひとファイルだけコンパイルしたい（その機能の実装を担当している）ということありませんか？

scssディレクトリ

mypage1.scss（このファイルをコンパイルしたい！）
mypage2.scss（このファイルをコンパイルしたい！）
quest.scss（これは対象外にしたい！）
battle.scss（このファイルをコンパイルしたい！）

そんな場合に、力を発揮するのが今回機能追加した内容です。
コンパイルの対象ファイルを絞り込むことで、より早く目的のファイルをコンパイルすることが出来るようになり、開発効率アップで、ウハウハです！！

Scssファイルを指定してのコンパイルの方法

使い方は、READMEのExample4にも書かせて頂いたのですが、こんな感じです。

grunt.initConfig({

  compassMultiple: {
    options : {
      javascriptsDir: 'js',
      imagesDir: 'img',
    },

    // sassFilesというプロパティに指定したファイルが、コンパイル対象になります。
    // compileの時にsassDirは必須なので、指定する必要があります。
    sassFilesTest: {
      options: {
        sassDir: 'scss',
        sassFiles: ['scss/mypage*.scss', 'scss/battle.scss'],
        cssDir: ['css'],
      }
    }
  },
});

上記の内容でgruntを実行すると、上述のファイルディレクトリのscssファイルのうち、「mypage1.scss、mypage2.scss、battle.scss」がコンパイルされ、「quest.scss」はコンパイル対象から外れます。

scssファイルは特定のディレクトリ下に纏めて保存することが多いかと思いますが、そんな時こそ自分の担当のscssファイルのみコンパイルしたいという切望に対応したのが今回のアップデートです（自分のかねてからの切望でもありましたw）。

最後に

今後もフロントエンドの開発環境の改善のため、色々と行って行きたいと思います。どうぞgrunt-compass-multipleを宜しくお願いします。

最後までご覧頂きましてありがとうございました。