GruntでSass/Compassのコンパイル～ブラウザリロード

モジュールインストール

npm install grunt-open --save-dev
npm install grunt-contrib-watch --save-dev
npm install grunt-contrib-connect --save-dev
npm install grunt-contrib-compass --save-dev

Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    compass: {
        dist: {
		    basePath: 'sass/',
			options: {
				cssDir: 'css'
			}
        }
    },
    watch: {
      options: {
        livereload: true,
        nospawn: true
      },
      sass: {
        files: 'sass/*.scss',
        tasks: ['compass']
      }
    },
    connect: {
      livereload: {
        options: {
          port: 12345
        }
      }
    },
    open: {
      server: {
        path: 'http://localhost:<%= connect.livereload.options.port %>'
      }
    }
  });

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

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-open');

};

LiveReload用の拡張機能をインストール→Chrome用 https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei

grunt実行。

grunt

１．connect～openでブラウザを開く
２．watchでsass/*.scssの更新監視
３．更新されたタイミングで、commpassでsccsをコンパイル
４．livereloadで、ブラウザが自動更新される。