Gruntの使い方:Compassをコンパイルする

goto_jp 790views 更新:2013年12月18日

前回Sassのコンパイルを行いましたが、Compassのコンパイルはまた別のタスクになります。

下記のフォルダ構成を前提とします。

project
├css
├sass
├config.rb (compass用設定ファイル)
├package.json
└Gruntfile.js

Gruntfile.jsを下記のように記述。

module.exports = function(grunt) {
  var pkg = grunt.file.readJSON('package.json');
  grunt.initConfig({
    compass: {
      dist: {
        options: {
          config: 'config.rb'
        }
      }
    },
    watch: {
      sass: {
        files: ['sass/*.scss'],
        tasks: ['compass']
      }
    }

  });
  var taskName;
  for(taskName in pkg.devDependencies) {
    if(taskName.substring(0, 6) == 'grunt-') {
      grunt.loadNpmTasks(taskName);
    }
  }
  grunt.registerTask('default', ['watch']);
};

Sassのコンパイルは Gruntfile.js に設定も記述しましたが、Compassの場合は設定はすべて config.rb 側に依存します。

前回の記述と合わせればSass系は一通りカバーできます。

こちらもお役に立つかもしれません