Grunt入門

  • 135
    いいね
  • 0
    コメント
この記事は最終更新日から1年以上が経過しています。

GRUNT入門

なぜなにGrunt

Gruntとは

  • 自動化ツールです

Gruntのメリット

  • htmlバリデートして、scssビルドして、jslintで監視しながらjs書いて、js結合して、jsミニファイして…などを毎回手動でやらなくてよくなります
  • peter$ grunt build で全部gruntちゃんがやってくれます

事前準備

node.js

  • version >= 0.8.0 (grunt 0.4.x+)
  • node.js バージョン管理ツール
    • Windows
      • nvmw
    • Mac
      • nodebrew

Grunt

  • version >= 0.4.x
peter$ npm install -g grunt-cli

Grunt

新規プロジェクトにGruntを導入する

必要なファイル

package.json
  • npmのメタデータの設定ファイル
  • これから必要なモジュールを自動で設定できたりする(要grunt-init)
Gruntfile.js
  • 自動化したいコマンド群の設定ファイル

導入手順

package.jsonをつくる
  1. プロジェクトフォルダのルートに移動
  2. ターミナル npm init
  3. ターミナル上で対話式にpackage.jsonを設定する
{
  "name": "sample",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": "",
  "author": "",
  "license": "BSD"
}

上記のようなpackage.jsonが出力される

{
  "name": "sample",
  "version": "0.0.0"
}

でもとくに必要ないので消しました

gruntモジュールを追加
npm install grunt --save-dev
  • このコマンドは先ほどのnpm installと違い-g(グローバル)オプションがありません
  • ですので、このモジュールはカレントフォルダにnode_modulesというフォルダが作られ、そこにインストールされます。
  • また--save-devオプションはモジュール追加と同時にpackage.jsonにモジュール名を追加してくれる便利なオプションです
{
  "name": "sample",
  "version": "0.0.0",
  "devDependencies": {
    "grunt": "~0.4.1"
  }
}

コマンド実行後のpackage.json
もし--save-devオプションを使ってもモジュール名が追加されない場合は
package.jsonのパーミッションが悪さをしてる場合があります

Gruntfile.jsをつくる

まずgruntモジュールを作成します

module.exports = function (grunt) {
…
}

読み込むモジュールは
npm install grunt-contrib-requirejs --save-dev
で取得したものです

grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-contrib-requirejs');

initConfigで各タスクを設定します

grunt.initConfig({
    pkg:grunt.file.readJSON('package.json'),
    //compassでscssをビルド
    compass: {
      dist: {
        options: {
          sassDir:'src/scss',
          cssDir:'src/css'
        }
      }
    },
    //requirejsを使ってjsを出力する
    requirejs: {
      compile: {
        options: {
          baseUrl: "src/js/",
          name:"app",
          mainConfigFile: "src/js/app.js",
          out: "dist/js/app.js"
        }
      }
    }
});

タスクを登録します

  • defaultの場合はpeter$ gruntで実行できます
  • タスク名がhogeの場合はpeter$ grunt hogeで実行します
grunt.registerTask('default', ['compass','requirejs']);
完成

上記をまとめるとこんな感じになります。

module.exports = function (grunt) {

  grunt.loadNpmTasks('grunt-contrib-compass');
  grunt.loadNpmTasks('grunt-contrib-requirejs');

  grunt.initConfig({

    pkg:grunt.file.readJSON('package.json'),        

    compass: {
      dist: {
        options: {
          sassDir:'src/scss',
          cssDir:'src/css'
        }
      }
    },
    requirejs: {
      compile: {
        options: {
          baseUrl: "src/js/",
          name:"app",
          mainConfigFile: "src/js/app.js",
          out: "dist/js/app.js"
        }
      }
    }
  });

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

これが実行されると

  1. src/scssにあるscssをcomapssがビルドしてsrc/cssに出力されます
  2. 次にプロジェクトフォルダのsrc/js/app.jsに記載してある設定に基づき、jsファイルが結合されてdist/js/app.jsに出力されます

既存プロジェクトへ導入

したい方はこちらへ

まとめ

今回紹介したのはcompassとrequirejsだけですが、
gruntのモジュールはgithubを探せばたくさんありますので、
自動化できるところは自動化して作業効率化していきましょう。

おまけ

  • grunt
    • 今回紹介したやつ
  • bower
    • jqueryなどのパッケージマネジャー
  • yeoman
    • プロジェクトテンプレートジェネレーター

をつかうとさらに便利らしい