[JS] Compass(Scss)のビルドが遅いので、マルチスレッドで高速でCompassビルドするgruntタスクを作ってみました

こんにちは、@yoheiMuneです。
Compass(Sass)を仕事で使うのですが、@extendとかがいっぱいあるとビルドに時間がかかるようになってきました。
今回は、その対策としてgruntのタスクとして、compassビルドをマルチスレッドで高速化するタスクを作ったので、紹介させて頂きたいと思います。

Compassのビルドは時間がかかる？

Compassってすごく便利なツールで、CSSをモジュールか出来たり案件ごとに使い回したりして、CSSのコーディングの効率化が出来ます。 でも、画像のBase64化やSprite化、@extendで共通Compassモジュールを使うコードなどが増えると、コンパイルに時間がかかってきます。

自身が関わっている案件では、gruntでscssファイルをwatchして、変更があったらcompassでビルドしているのですが、 compassビルドに10秒以上かかるようになってしまいました。
これでは小さなサイクルでの実装->テスト->実装が出来なくなってしまい効率が落ちてしまいます。

compassビルドの動きをよく見ていると、rubyを使ってscssをcssにコンパイルしていて、利用スレッド数は１。 じゃあスレッド数あげればもっと早くビルドできるのではと思い、今回の件に至りました。

compassビルドをマルチスレッドで行い高速化する、gruntタスク

ということで、compassビルドをマルチスレッドで行うgruntタスクを作ってみました。そしてnpmにも登録！！
（はい、一度npmにも登録して使ってみたかったのです。。）


grunt-compass-multiple


これを使うと、コンパイル対象のscssファイルをそれぞれ別スレッドでコンパイルするため、コンパイル総時間が短くなるという感じです。

grunt-compass-multipleの使い方

使い方はREADMEにも書かせて頂いたのですが、 簡単で、以下のように利用します。

npmのインストール

npm install grunt-compass-multiple

Gruntfile.jsでの書き方

// npmタスクのロード
grunt.loadNpmTasks('grunt-compass-multiple');

// compassMultipleというタスクを指定します
grunt.initConfig({

  compassMultiple: {
    options : {
      // if you need, you can set options.
      environment: 'production',
      outputStyle: 'compressed',
      javascriptsDir: './js',
      imagesDir: './image',
      fontsDir: './font',
      time: true
    },

    // you can specify compiling target as options.sassDir, and output dir as options.cssDir.
    // At now, you can only set sassDir and cssDir options.
    common : {
      options: {
        // every compile needs sassDir and cssDir.
        sassDir: 'page/css/cmn/',
        cssDir: '../static/page/css/cmn/'
      }
    },

    // you can multiple sassDir and cssDir, using multiple options.
    all: {
      options: {
        multiple: [
          {
          sassDir: 'page/css/cmn/',
          cssDir: '../static/page/css/cmn/'
          },{
          sassDir: 'page/css/orgn/scss',
          cssDir: '../static/page/css/orgn/'
          }
        ]
      }
    }
  }
});

他にもcompassのconfig.rbを使う設定も可能ですので、詳細はREADMEを参照頂けると幸いです。

使ってみた感じ

使ってみた感じでは、自身の案件でのcompassビルドが10秒以上 -> 4秒前後に改善しました。
すべてのcompassプロジェクトで効果を発揮するかはわかりませんが、compassのビルド遅くて困ってるなーという方には、もしかしたらお力になれるかもしれません。

その他

grunt-compass-contribに関するその他情報を掲載します。

• gruntは0.4以上が必須です。
• grunt-comass-contribのソースコードは、github：grunt-compass-multipleにあります。

最後に

Compassってすんごく便利。でもちょい遅い。そんな悩みを解消したいと思って作ったタスクです。
将来Compassのビルドが早くなってgruntのwatchでも軽々使えるようになったら、このタスクは廃止しようと思ってます。

あとCompassを使ったCSSのモジュール化についてもこれから進めたいなぁーと思う今日この頃です。
最後までご覧頂きましてありがとうございました。