フロントエンドで遊ぶためにGrunt入れようと思ってHomebrewでnodeインストールするところから始めた

フロントエンドでサクサク遊ぶためにGrunt入れようと思ってHomebrewでnodeインストールするところから始めた、という話です。

Gruntってやつは、決まったタスクを自動でガシガシこなしてくれます。
例えば、coffeescriptとsass使って開発してると、compassとかcoffeeとかでwatch（ファイルの監視）させて・・・とかやってたのを、gruntさんに一気にお任せしちゃおう、っていう感じです。他にも、ソースコードのminfyとか色々出来るそうなんですが、今回はそこまではやりません。

なんか色々調べてると、nodebrewみたいなものもあるようなんですが、node.jsでアプリケーション作るというよりかは、grunt使いたいだけだったので、バージョン管理も（今回は）杜撰で良いしということで、Hombrewでやることにしました（2014/09/24）。

とりあえず、目標はソースコードいじって保存したら、ブラウザが勝手に更新されてるぜ！みたいなところです。html,css,jsあたりはもちろん、phpもそれやりたい。

さっそくnodeのインストール

homebrewでさくさくーっとインストールです。

~ $ brew install node
==> Downloading https://downloads.sf.net/project/machomebrew/Bottles/node-0.10.31.mavericks.bottle.tar.gz
######################################################################## 100.0%
==> Pouring node-0.10.31.mavericks.bottle.tar.gz
==> Caveats
Bash completion has been installed to:
  /usr/local/etc/bash_completion.d
==> make install
==> /usr/local/bin/npm update npm -g --prefix /usr/local
==> Summary
🍺  /usr/local/Cellar/node/0.10.31: 1547 files, 19M

特に詰まることも無くインストール出来ました。

~ $ npm -version
2.0.2

バージョンも無事に確認出来ました。

次はGruntのインストール

これもさくっとしたもの。

~ $ npm install -g grunt-cli
/usr/local/bin/grunt -> /usr/local/lib/node_modules/grunt-cli/bin/grunt
grunt-cli@0.1.13 /usr/local/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.5)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.11)

これも問題なく出来ました。

gのオプションは、グローバルのgでこれを指定すると、パスが通るのでどこでもコマンド呼び出せるぜーってやつらしいです。

今既にある環境を汚さずに、カレントディレクトリでやりたい時には-g外してください。

Gruntを使ってみる -> gruntモジュールをインストール

localhostっていうところに、testディレクトリを作りました。
その中で、npm initを実行してください。

~/localhost/test $ npm init

対話形式で必要な情報（プロジェクトの名前とか）が聞かれるので、
適当に答えてると、package.jsonが生成されます。

ほんでもって、gruntモジュールのインストールです。

npm install grunt --save-dev

save-devオプションをつけると、package.jsonの中に、devDependenciesプロパティが追加されます。これで、package.jsonを違う環境でnpm installするだけでgruntモジュールがインストールされるようになりました。

  "devDependencies": {
    "grunt": "^0.4.5"
  }

こんなの、package.jsonに入ってました？

入ってたらOKです。

Gruntを使ってみる -> Gruntfile.jsファイルの作成と実行

Gruntfile.jsを作成ー。これはマルコピでOKです。ちなみに、coffeeでも良いらしいです。

module.exports = function(grunt) {
  //Gruntの設定
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json')
  });
  //defaultタスクの定義
  grunt.registerTask('default', 'Log some stuff.', function() {
    //ログメッセージの出力
    grunt.log.write('Logging some stuff...').ok();
  });
};

これを作成出来たら、gruntコマンドを実行！！

~/localhost/test $ grunt
Running "default" task
Logging some stuff...OK

Done, without errors.

という感じで、gruntが動くようになりましたー₍₍⁽⁽(ી(*ﾟ▽ﾟ*)ʃ)₎₎⁾⁾

夢の自動更新への下準備 - grunt-contrib-watch

grunt-contribというプラグインがあって、スーパー便利。

例えば、
grunt-contrib-coffeeは、CoffeeScriptをJavaScriptにコンパイルしてくれるやつで
grunt-contrib-compassは、Compassを通してSassをCSSにコンパイルしてくれます。
なんかこんな感じで、ええ感じのプラグインがたくさん詰まってるのがgrunt-contribです（荒い）。
詳しくは下記を参照あれ。
grunt-contrib

今回は、ファイル監視をしてくれるgrunt-contrib-watchで十分なので、こいつをインストールしまっす。
<a href="https://github.com/gruntjs/grunt-contrib-watch">gruntjs/grunt-contrib-watch</a>
gruntjs/grunt-contrib-watch · GitHub

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

上記のコマンドを実行して、package.jsonを見ると

  "devDependencies": {
    "grunt": "^0.4.5",
    "grunt-contrib-watch": "^0.6.1"
  }

grunt-contrib-watchがちゃんと追加されてる。

HTMLファイルを自動で更新してみよう！

Gruntfile.jsの方で、監視対象のファイルを指定してあげて、livereloadのオプションをtrueにする。
で、gruntコマンドを実行した時のタスクとして、watchを登録する。

module.exports = function(grunt) {
  //Gruntの設定
  grunt.initConfig({
    watch: {
      html_files: {
        files: '**/*.html',
        options: {
          livereload: true
        },
      },
    },
  });
  grunt.loadNpmTasks('grunt-contrib-watch'); // contrib-watchを読み込む

  grunt.registerTask('default', ['watch']); // タスクの登録
};

次にHTMLファイルを用意してあげます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>Documaaaenta</title>
  <script src="//localhost:35729/livereload.js"></script>
</head>
<body>
  テスト
</body>
</html>

いくつかlivereloadの方法はあるんですが、今回はlivereload.jsを読み込ませる方法にしました。

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

この一文をhead内にでも放り込んでください。
他にもブラウザのextensionなんかでも対応出来るそうです。

これで準備ができたので、いざgruntコマンドを実行！！

$ grunt
Running "watch" task
Waiting...

こんな感じになるので、対象のファイルを開いて編集して保存してください。
ブラウザが勝手に更新されてるー₍₍⁽⁽(ી(*ﾟ▽ﾟ*)ʃ)₎₎⁾⁾

HTMLとCSSとJSが更新されるよう設定

Grunt.js

module.exports = function(grunt) {
  //Gruntの設定
  grunt.initConfig({
    watch: {
      html_files: {
        files: '**/*.html',
        options: {
          livereload: true
        },
      },
      css: {
        files: 'css/*.css',
        options: {
          livereload: true
        },

      },
      scripts: {
        files: 'js/*.js',
        options: {
          livereload: true
        },
      }
    },
  });
  grunt.loadNpmTasks('grunt-contrib-watch');

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

ちょっと雑だけど、これでOK！！

長くなって来たので、一旦ここで。
次は、grunt-phpというやつ入れてみますー

[追記]

フロントエンド制作向けビルドツールGruntを PHPバックエンド開発で利用する @M_Ishikawa #phpcon2013 from Masayuki Ishikawa

あとあと、こんなん見つけた。