node.js と grunt のインストール

Time Machineで復帰させたところnode.jsが消えてしまっていたようなので、公式から再インストールしてgruntを動かすまでをメモ。
(環境はMac v10.9.2。)

おおまかな流れ

  • node.js / grunt のインストール
  • テスト用のディレクトリ作成からnpm / grunt を入れるまで
  • coffeescript の minify
  • grunt-contrib-watch でファイルの監視
  • LiveReload の実行・確認

 

node.js / grunt のインストール

node.js のインストール

公式サイトからダウンロード、インストール。

grunt のインストール

ターミナルを立ちあげ、以下を実行する。

$ sudo npm install -g grunt-cli

テスト用のディレクトリ作成からnpm / grunt を入れるまで

テスト用のディレクトリを作成する。
ターミナルで下記を実行。

例:

$ mkdir sites/test/grunt-test
$ cd sites/test/grunt-test

mkdir はディレクトリ作成、cd はディレクトリ移動。
後述で使うので「src」と「dest」フォルダも作ってしまう。

$ mkdir src
$ mkdir dest

npm のインストール

$ npm init

そのままエンターを押していき、設定を完了。
テスト用のディレクトリ直下にpackage.jsonファイルが作成されている。

grunt をインストール

$ npm install grunt --save-dev

coffeescript の minify

CoffeeScriptの設置

さきほど作成した「src」ディレクトリに下記のcoffeeScriptファイルを用意。

add = (x, y) ->
     x + y
res = add 3, 4
console.log res

必要なプラグインのインストール

ターミナルで下記を実行。

$ npm install grunt-contrib-coffee --save-dev

package.jsonが下記のようになっていれば完了。

{
  "name": "grunt-plugin-sample",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^0.4.4",
    "grunt-contrib-coffee": "^0.10.1"
  }
}

package.json

Gruntfile.js の作成

CoffeeScript をコンパイルするためのGruntfile.jsをテストディレクトリ直下に用意。

// 'use strict';
module.exports = function(grunt) {
  grunt.initConfig({
    coffee: {
      compile: {
        files: {
          'dest/sample.js': ['src/sample.coffee']
        }
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.registerTask('default', 'coffee');
};

Gruntfile.js

grunt.loadNpmTasksgrunt-contrib-coffee をロード。
coffee:compileタスクが使用できるようになるので、先ほど作成したsample.coffeeとその出力先を指定する。

デフォルトのタスクでcoffeeが指定されているので、実行時にタスクを指定しなくてもCoffeeScriptのコンパイルが実行される。

動作確認

上記までできたらgruntを実行する。

$ grunt coffee

実行結果↓

Running "coffee:compile" (coffee) task

Done, without errors.

「dest」ディレクトリにsample.jsとしてコンパイルされている。

複数のcoffeeファイルのコンパイルに対応する

複数のcoffeeファイルを使用する際の設定。
コンパイル対象を動的に指定できる。

さきほどGruntfile.jsに記述したcoffeeタスクを下記のように修正。

……
    coffee: {
      compile: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.coffee'],
          dest: 'dest/',
          ext: '.js'
        }]
      }
    }
……

Gruntfile.js

「src」ディレクトリ内にサブディレクトリを作成し、sample.coffeeをコピーして持ってくる。

そして、再度 grunt coffeeを実行すると、「src」と同様の階層で「dest」内にディレクトリが作成され、すべてのcoffeeファイルがコンパイルされている。

grunt-contrib-watch でファイルの監視

grunt-contrib-watch はファイルの変更を監視するプラグイン。
これを利用して、livereload(自動更新)を行う。
他には、さきほどのCoffeeScriptファイルのコンパイルや、sassファイル変更のタイミングで、自動コンパイルすることも可能。

ターミナルで下記を実行。

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

Gruntfile.js を修正

// 'use strict';
module.exports = function(grunt) {
  grunt.initConfig({

    watch: {
      coffee: {
        tasks: 'coffee',
        files: ['src/**/*.coffee']
      }
    },

    coffee: {
      compile: {
        files: [{
          expand: true,
          cwd: 'src/',
          src: ['**/*.coffee'],
          dest: 'dest/',
          ext: '.js'
        }]
      }
    }
  });
  grunt.loadNpmTasks('grunt-contrib-coffee');
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.registerTask('default', 'coffee');
};

Gruntfile.js

watch タスクでは「src」以下にあるcoffeeファイルの変更を監視し、変更を検知したらcoffeeタスクを実行するように指定。

ターミナルで grunt watch を実行すると、ファイルの監視がはじまる。

実行結果↓

Running "watch" task
Waiting...

(ちなみに終了は mac なら cotrol + c)

「Waiting…」中はファイルを監視しているので、coffeeファイルの保存を検知すると、

>> File "src/sample.coffee" changed.
Running "coffee:compile" (coffee) task

Done, without errors.
Completed in 0.828s at Thu Apr 17 2014 13:51:29 GMT+0900 (JST) - Waiting...

↑のように自動的にcoffeeタスクを実行し、コンパイルしてくれる。

LiveReload の実行・確認

テスト用ディレクトリ内に新たに「html」ディレクトリを作成。
そこにindex.htmlを追加する。

<!DOCTYPE html>
<html>
<head lang="ja">
    <meta charset="UTF-8">
    <title>livere load</title>
</head>
<body>
<h1>sample html</h1>
</body>
</html>

index.html

ディレクトリ・ファイル構成

ここまでのディレクトリ構成は下記のようになる。

[テスト用ディレクトリ]
-[src]
-[dest]
-[html]
-[node_modules]
-package.json
-Gruntfile.js

grunt-contrib-connect プラグインのインストール

$ npm install grunt-contrib-connect --save-dev

Gruntfile.js の修正

Gruntfile.jsを下記のように修正。

// 'use strict';
module.exports = function (grunt) {

  grunt.initConfig({

    watch: {
      options: {
        livereload: true
      },
      html: {
        files: ['html/**/*.html'],
        tasks: ['']
      }
    },

    connect: {
      server: {
        options: {
          port: 9000,
          base: 'html'
        }
      }
    }

  });

  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-connect');
  grunt.registerTask('default', ['connect', 'watch']);
};

Gruntfile.js

connect タスクでサーバーを9000番ポートで起動するように指定。
htmlディレクトリをサーバーのドキュメントルートとして起動するように指定。
watchタスクでhtmlディレクトリ以下の変更を監視し、「livereload」オプションを有効にする。

Gruntを実行

$ grunt connect watch

実行結果↓

Running "connect:server" (connect) task
Started connect web server on http://0.0.0.0:9000
Running "watch" task
Waiting...

Google ChromeのLiveReload拡張で動作確認。

Chrome v34(2014/04/17 時点)でLiveReloadを使用する。
先にChromeウェブストアからライブリロード拡張をインストール・有効化しておく。

Chrome ウェブストア – LiveReload

インストールしたら、http://localhost/index.html にアクセス。
自分は表示されなかったので、その場合は grunt 実行後のログにある http://0.0.0.0:9000 にアクセスすると表示された。

この状態でindex.htmlを編集・保存すると、即時ブラウザも更新され、変更した内容が適用されているのがわかる。


以上、ほぼ参照先をまとめる形の覚え書き。

参照先

Gruntで始めるWeb開発爆速自動化入門(2):CoffeeScriptやSassなどの使用時にオススメのGruntプラグイン一覧 (1/3) – @IT

Gruntで始めるWeb開発爆速自動化入門(1):ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (2/2) – @IT

 549 Views