これからはじめるGrunt - MAMPは捨てよ編 -

Written by Daichi Kimura

Gruntってなんぞ

  • Node.js製のタスクランナー
  • 操作は基本的にCUI（黒い画面）
  • タスクを設定しておくと、そのタスクを裏側で自動的にやってくれる
  • プラグインの数が1,000個以上

事前準備

1. node.jsをインストール

インストール後、下記のコマンドを入力して応答があれば大丈夫。

node -v

2. Gruntをインストール

ターミナル（またはコマンドプロンプト）を開いて下記のコマンドを入力します。

npm install -g grunt-cli

Let’s Do This!!!

1. 適当なディレクトリを作成

$ mkdir grunt-test

2. 作成したディレクトリに移動

$ cd grunt-test

3. Package.jsonの作成

$ npm init

上記のコマンドを投下後、プロジェクト名などを聞いてくるので入力してください。
（Enterキー連打でもOK）

4.Gruntプラグインのインストール

Gruntプラグインのインストール準備ができましたので、
プラグインをインストールしていきます。

今回は、ローカルサーバーを立ててみましょう。
プラグインはgrunt-contrib-connectをインストールします。

$ npm install grunt-contrib-connect -D

インストールが終わると以下の構成になっていると思います。

├── node_modules
│        └── ...
└── package.json

5. Gruntfileの作成

これでGruntを動かす準備ができたので、Gruntfileを作成していきます。
今回は、CoffeeScriptの形式でGruntfileを書いていきます。

Gruntfile.coffeeというファイルを作成して以下の内容を記述します。

module.exports = (grunt) ->
    grunt.initConfig
        connect:
            server:
                options:
                    port: 8088
                    base: '.'
                    directory: '.'
                    keepalive: true
                    open: true

    grunt.loadNpmTasks 'grunt-contrib-connect'
    grunt.registerTask 'default', 'connect'

6. Gruntの実行

Gruntfileの作成が終わったら、
適当なHTMLファイルをGruntfileと同じディレクトリに、
index.htmlとファイル名を変更して置いてください。

その後、下記のコマンドをターミナルから投下すると
ブラウザが開いて置いたファイルが表示されると思います。

$ grunt

表示されましたか？
静的ページをローカルで確認するのであれば、こんな感じでできたりします。
これであなたも「MAMPなんていらんかったんや！」生活の仲間入りです。

サンプルファイル

手っ取り早く構成を見てみたい場合は、
サンプルをGithubリポジトリに置いてますので、
ダウンロード or git cloneをお願いします。
https://github.com/dkimura/grunt-test

あとがき

これ以外にできること

今回はローカルサーバーをさくっと立ててみましたが、
その他にこんな事ができます。

  • Sass, CoffeeScriptのコンパイル
  • HTML/CSS/JSファイルの圧縮
  • CSS3のベンダープレフィックスの追加/削除
  • 使用していないCSSセレクターの削除
  • etc…

などなど他にも沢山あります。
( ˘ω˘) その他に便利そうなプラグインあったら教えて下さい。

その他の参考文献