133
131

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

Grunt入門

Posted at

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
    • プロジェクトテンプレートジェネレーター

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

133
131
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
133
131

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?