とりあえずpackge.jsonがあってgruntを使っているであろうプロジェクトファイルを渡されてたときの対応、というかgruntを使った開発入門

フロントエンドというかデザイン的な部分の開発を担当したときのこと。
急にヘルプに入ったので右も左もよくわからなかったのですが、とりあえずgruntを使っているであろうプロジェクトファイルを渡されました。
packge.jsonを見つけて中を覗いてみると、gruntが要りますよ的な記述があったので、まぁgruntを入れるか〜とか思っていました。

内容

ドットインストールのまとめになります。
http://dotinstall.com/lessons/basic_grunt

環境

• Yosemite
• Homebrewは入ってる(homebrewについてはこちらが参考になるかもしれません)

node.jsとnpmをインストール

$ brew install node

これでとりあえず入りました。

$ npm -v
2.1.10
$ node -v
v0.10.32

gruntをインストール

package.jsonがもうあって、そこにgruntの記載もあるので、以下の様にしてgruntをインストールします。

$ npm install

記載された内容の通りにインストールされるはずです。

gruntの使い方

簡単なメモ程度になります。

Gruntfile.jsをいじります。

基本的な書式

module.exports = function (grunt) {
  grunt.initConfig({
    task1: { // たいていプラグイン名と一緒
      options: { // このタスクの全ターゲット共通でオプションを設定する
      },
      target1: { // タスクをグループ化したもの
        options: { // target1に対してのオプション
        },
        設定
      },
      target2: {
        設定
      }
    },
    task2: {
      ・・・
    }
  });
  grunt.loadNpmTasks('PACKAGENAME'); //packageを読み込む
  grunt.loadNpmTasks('PACKAGENAME');

  grunt.registerTask('default', ['task1', 'task2']); //タスクを登録
};

基本的な例

module.exports = function (grunt) {
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),

    sass: {                    // タスク名
      fugafuga: {              // ターゲット名
        options: {             // オプションを選びます
          style: 'compressed', // nested, compact, compressed, expanded
        },
        static_page: {
          'assets/css/fugafuga.css': 'scss/*.scss' // 'destination': 'source', sourceのファイル群をdestinationのファイルにマージする
        }
    },

    watch: { // いちいちgruntやgrunt tasknameとか打たなくても該当のファイルに変更が加わった場合に指定されたタスクを動かす設定
      fugafuga: {
        files: ['scss/*.scss'],
        tasks: ['sass'],
        options: {
          livereload: true // ファイルのが変更されたら、connectされたサーバーでも、変更を自動で反映させる設定
        }
      },
    },

    connect: { // サーバーに接続する
      fugafuga: {
        options: {
          hostname: 'xxx.xxx.xxx.xxx', //192.168.33.10とか
          port: xxxx // 8080とか
        }
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');

  grunt.registerTask('default', ['sass', 'connect', 'watch']);　//connectを使う場合はwatchの前に登録しないとダメ。ずっとwatchが走ってconnectされないから。

livereloadを使う場合

html側に設定が必要
以下を追記します。

portは35729と決まっている模様。

<script src="http://IPADDRESS:35729/livereload.js"></script>

References

• http://dotinstall.com/lessons/basic_grunt

トラブル

zsh: command not found: grunt

/usr/local/binにもgruntが作成されない。
コマンドラインからgruntを使うときには

$ npm install -g grunt-cli