JavaScript (HTML): Grunt 導入

Grunt とは

Grunt とは JavaScript のビルドツールであり、JavaScript で書けるシェルスクリプトです。
フロントエンドでもバックエンドでも大活躍です。

実行できるタスク例)
・サーバーを起動する
・シンタックスチェックする
・ファイル操作<複製、削除、結合>
・メタ言語<CoffeeScript, Sass, …>のコンパイル
・ミニファイ、gzip 圧縮
・CSS Sprite 自動生成、画像最適化
・ファイル保存でブラウザを自動リロード(LiveReload)
・スタイルガイドの生成(StyleDocco)

Grunt のインストール

ターミナルでインストールします。

$ [sudo] npm install -g grunt-cli

システムにインストールされました。

プロジェクトの作成

プロジェクトを作成したいディレクトリでコマンドをうちます

$ npm init

下記情報の入力を求められます。一つ一つ聞いてくるので、そのままエンターキー押していけば空文字、あるいは括弧内の文字が入力されます。

name: (test) 
version: (0.0.0) 
description: 
entry point: (index.js) 
test command: 
git repository: 
keywords: 
author: 
license: (BSD-2-Clause) 

package.json が生成されます。
name だけ helloworld としました。(空白文字等は使えません)

{
  "name": "helloworld",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause"
}

プロジェクト内に grunt を追加します。

$ npm install grunt --save-dev

–save-dev オプションを付けると package.json に変更を加えられます。

{                                                                           
  "name": "helloworld",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

タスクのインストール

$ npm install grunt-contrib --save-dev

これで grunt の様々なタスクをいっぺんに入れられます。
https://npmjs.org/package/grunt-contrib

devDependencies が増えています。

{                                                                           
  "name": "helloworld",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-contrib-concat": "~0.3.0",
    "grunt-contrib-copy": "~0.4.1",
    "grunt-contrib-sass": "~0.5.0",
    "grunt-contrib-compass": "~0.6.0",
    "grunt-contrib-csslint": "~0.1.2",
    "grunt-contrib-coffee": "~0.7.0",
    "grunt-contrib-clean": "~0.5.0",
    "grunt-contrib-htmlmin": "~0.1.3",
    "grunt-contrib-jst": "~0.5.1",
    "grunt-contrib-cssmin": "~0.6.2",
    "grunt-contrib-requirejs": "~0.4.1",
    "grunt-contrib-compress": "~0.5.2",
    "grunt-contrib-connect": "~0.5.0",
    "grunt-contrib-watch": "~0.5.3",
    "grunt-contrib-jshint": "~0.6.5",
    "grunt-contrib-uglify": "~0.2.5",
    "grunt-contrib-handlebars": "~0.5.11",
    "grunt-contrib-stylus": "~0.8.0",
    "grunt-contrib-jade": "~0.8.0",
    "grunt-contrib-qunit": "~0.3.0",
    "grunt-contrib-imagemin": "~0.3.0",
    "grunt-contrib-jasmine": "~0.5.2",
    "grunt-contrib-less": "~0.7.0",
    "grunt-contrib-nodeunit": "~0.2.2",
    "grunt-contrib-yuidoc": "~0.5.0",
    "grunt-contrib": "~0.8.0"
  }
}

ライブラリは node_modules にインストールされます。
必要の無いモジュールまで読んでしまうので、本当は grunt-contrib-###### を指定した方が良さそうです。

.
├── node_modules
│   ├── grunt
│   ├── grunt-contrib
│   ├── grunt-contrib-clean
│   ├── grunt-contrib-coffee
│   ├── grunt-contrib-compass
│   ├── grunt-contrib-compress
│   ├── grunt-contrib-concat
│   ├── grunt-contrib-connect
│   ├── grunt-contrib-copy
│   ├── grunt-contrib-csslint
│   ├── grunt-contrib-cssmin
│   ├── grunt-contrib-handlebars
│   ├── grunt-contrib-htmlmin
│   ├── grunt-contrib-imagemin
│   ├── grunt-contrib-jade
│   ├── grunt-contrib-jasmine
│   ├── grunt-contrib-jshint
│   ├── grunt-contrib-jst
│   ├── grunt-contrib-less
│   ├── grunt-contrib-nodeunit
│   ├── grunt-contrib-qunit
│   ├── grunt-contrib-requirejs
│   ├── grunt-contrib-sass
│   ├── grunt-contrib-stylus
│   ├── grunt-contrib-uglify
│   ├── grunt-contrib-watch
│   └── grunt-contrib-yuidoc
└── package.json

package.json でタスクをインストール

プロジェクトごとにライブラリを入れ直す、セットアップしなおすには、上記コマンドを毎回入力しないといけません。
しかし今回作成したようなインストールすべきライブラリがまとめられた package.json が事前に用意されている場合、より簡単にインストールできます。

devDependencies が書かれた package.json があるディレクトリで、

$ npm install

とすることで、必要なライブラリを取得してきて、node_modules ディレクトリを作成してくれます。

Grunt 制御文を書く

タスクモジュールの用意ができたので、実行したいタスクを記入していきます。

基本形

module.exports = function(grunt) {
  grunt.initConfig({
  
  });
};

これにタスクを書いていき Gruntfile.js という名前で保存して実行します。
Gruntfile.js があるディレクトリで

$ grunt

とコマンドをうつと実行されます。

css を保存したら自動でミニファイする Gruntfile.js

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin: {
      compress: {
        files: {
          './min.css': ['css/include.css', 'css/main.css', 'css/page.css']
        }
      }
    },
    watch: {
      files: ['css/*.css'],
      tasks: ['cssmin']
    }
  });

  // タスクモジュールを読み込む
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-watch');
  
  // デフォルトのタスクを cssmin と watch にする
  grunt.registerTask('default', ['cssmin', 'watch']);
};
$ grunt

で実行できます。

grunt の公式サイトに plugin という形で様々なタスクが紹介されています。
http://gruntjs.com/plugins