Help us understand the problem. What is going on with this article?

Grunt でCSSの監視・圧縮, Compassを使ったSass(SCSS)の監視・コンパイル・圧縮を自動化してみた

More than 5 years have passed since last update.

備忘録です.
最近,SassやCompassを使っててコンパイルしたりなんだりの実行がだるいので,
昔先輩にオススメしてもらったまま放置してたGruntを試してみることにしました.
今回はCSSの監視と圧縮を行い,簡単な動作確認をします.
また,Compassを使用して記述したSass(SCSS)の監視とコンパイル・圧縮も行います.
Node.jsはすでに導入しているものと仮定しています.

環境

  • MacOSX (10.9)
  • Node.js (v0.10.29)
  • npm (1.4.14)

Grunt のインストール

Grunt のインストールは,ターミナル上でnpmを使って行います.
まず,GruntのCommand Line Interfaceをインストールします.
sudo npm install -g grunt-cli

次に,作業用ディレクトリに移動しpackage.jsonをnpm initで作成します.
npm initを実行するとname や versionについて対話形式で入力が促されるので,
表示に従って入力をしていきます.

続いて,Gruntを下記のコマンドでインストールします.
また,CSSの圧縮と監視を行うためにプラグインであるcssminとwatchもインストールしています.
sudo npm install grunt grunt-contrib-cssmin grunt-contrib-watch --save-dev

ここまでの作業が終わると下記のようなpackage.jsonが作成されます.
また,node_modules以下にgruntディレクトリなどが作成されます.

package.json
{
  "name": "gruntTest",
  "version": "0.0.0",
  "description": "grunt test",
  "main": "Gruntfile.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "scarleteve",
  "license": "BSD",
  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-cssmin": "^0.10.0",
    "grunt-contrib-watch": "^0.6.1"
  }
}

CSSの監視と圧縮

Gruntでは,Gruntfile.jsに書かれたタスクが実行されます.
今回はCSSの監視と圧縮を行いたいので,下記のようなGruntfile.jsを作成しました.

Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      minify: {
        files: {
          'css/style.min.css':'css/style.css'
        }
      }
    },
    watch: {
      files: ['css/style.css'],
      tasks: ['cssmin']
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

使用するプラグインはgrunt.loadNpmTasks(hogehoge)といったように読み込みます.

実行するタスクはgrunt.initConfig の中に書いていきます.
このGruntfile.jsでは,
watch(監視)のターゲットにcss/style.cssを選択,
ターゲットに何らかの変化があったらcssminというタスクを実行します.
cssmin(圧縮)では,css/style.css を圧縮し,
css/style.min.cssとして結果を保存します.

Gruntの実行はターミナルで,grunt watchと入力して行います.

grunt.loadNpmTasks('grunt-contrib-watch'); の下の行に,
grunt.registerTask('default', 'watch'); と追記することで,
単にgruntだけで同じことが可能です.

Compassを使用したSass(SCSS)の監視とCSSへの変換・圧縮

CSSの時と同様にCompassのプラグインをインストールしていきます.
sudo npm install grunt-contrib-compass --save-dev

また,Gruntfile.jsにsassディレクトリ以下の.scssファイルをコンパイルするタスクを以下の様に追記します.
今回の様にCompassを使用したSass(Scss) のコンパイルにはCompassの設定ファイル(Config.rb)が必要になります.
こちら(MacOSX(10.9) + Sublime Text 3 + Compass 環境を作る)を参考にして用意してください.

Gruntfile.js
module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      minify: {
        files: {
          'css/style.min.css':'css/style.css'
        }
      }
    },
    compass: {
      compile: {
        options: {
          config: 'config.rb'
        }
      }
    },
    watch: {
      css: {
        files: ['css/style.css'],
        tasks: ['cssmin']
      },
      scss: {
        files: ['sass/style.scss'],
        tasks: ['compass']
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-compass');
};

watch(監視)のターゲットにsass/style.scssを追加しています.
ターゲットに何らかの変化があった時,compassというタスクが実行されます.
compassでは,Config.rbにしたがってstyle.scss→style.cssのコンパイルを行います.
この時,style.cssに変化が生じた場合のタスク実行の流れはすでに説明したとおりです.

実行方法はCSSの時と同様です.

ひとこと

GruntのイノシシがMHシリーズのブルファンゴフェイクにしか見えない.Gruntおじさんって呼ぶことにしよ.

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away