MacでGruntインストールメモ

参照
http://5log.jp/blog/nodebrew/
http://kojika17.com/2013/03/grunt.js-memo.html
http://catcher-in-the-tech.net/461/

nodebrewのインストール

node.jsのバージョン管理にnodebrewを利用します。

curl -L git.io/nodebrew | perl - setup

PATHを通す

.bash_profile に環境変数 PATH を設定

$ sudo vi .bash_profile

export PATH=$HOME/.nodebrew/current/bin:$PATH

.bash_profile をリロードして、nodebrewコマンドが動くか確認

$ source ~/.bash_profile
$ nodebrew help

node.js インストール

#バージョンリストを確認
$ nodebrew ls-remote
$ nodebrew install-binary v0.11.13

#インストール済みバージョンの確認
$ nodebrew ls

#利用するバージョンを選択
$ nodebrew use v0.11.13

grunt-cli のインストール

$ npm install -g grunt-cli

作業ディレクトリに移動

#/Users/purazumakoi/vagrant/centos で作業する為移動
$ cd ~/vagrant/centos

package.json作成

$ npm init
とりあえず全部enter

compass(sass)が入ってないので入れる

$ sudo gem update --system
$ sudo gem install compass

grunt本体、sass実行環境インストール

$ npm install grunt --save-dev
$ npm install grunt-contrib-sass grunt-contrib-watch --save-dev

Gruntfile.js作成

$ vi Gruntfile.js

Gruntfile.js

module.exports = function(grunt){

  pkg: grunt.file.readJSON('package.json'),  //package.jsonを取得

  grunt.initConfig({      //grunt.initConfigの中にタスクの設定を記述する

    sass: {                         // タスクの名前
      dist: {                       // ターゲット
        options: {                  // ターゲットのオプション。タスクのデフォルトの設定を上書きする
          style: 'expanded'
        },
        files: {                    
          'css/style.css': 'sass/test.scss'   //生成されるcss:’参照元のscss'
        }
      }
    },
    watch: {
      styles: {
        files: ['sass/*.scss'],   //監視するファイルを指定（sassフォルダのscssファイル全て）
        tasks: ['sass']   //指定したファイルが変更された場合行うタスク（sassのコンパイルをする）
      }
    }
  });

  // loadNpmTasksを使用して、プラグインを読み込む
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');

  //defaultと設定することで、登録しているタスクを全て順番に実行する
  grunt.registerTask('default', ['sass', 'watch']);  

};

sassのファイルなどを作る

$ mkdir sass
$ cd sass
$ vi test.scss
test.scssのなかみは何かいれる

grunt実行

$ cd ~/vagrant/centos
$ grunt