Gruntの導入方法と使い方

Gruntの導入方法と使い方

ファイルの圧縮やコンパイルなどを自動で行ってくれるタスクランナー、Gruntの導入方法についてまとめていきたいと思います。

目次

  1. Gruntとは?
  2. Node.jsをインストール
  3. Gruntの導入方法

1. Gruntとは?

JavaScriptやCSSファイルを圧縮・結合、Sassのコンパイル時、ターミナルを使用してコマンドを実行する代わりに、それらの作業を全て自動化してくれる便利なツールの事です。

2. Node.jsをインストール

Gruntを使用するには、まずNode.jsをインストールする必要があるので、下記URLから公式サイトへ行き、インストールしておきます。

公式サイト

インストールが終わったら、ターミナルで下記コマンドを実行(Returnキーをポチっと)します。バージョン(数字)が表示されればインストールが正常に完了しています。

$ node -v

3. Gruntの導入方法

3-1. grunt-cliをインストール

Node.jsのインストールが完了したので、Gruntコマンドを使えるようにするためにgrunt-cli(Gruntの本体ではないです)をインストールします。

グローバルインストールをするために-gを付けてインストールします。

$ npm install -g grunt-cli 

インストール完了の確認は下記コマンドを実行します。

$ grunt

すると以下のようなメッセージが表示されると思います。このメッセージが表示されればgrunt-cliのインストールは完了です。

grunt-cli: The grunt command line interface (v1.2.0)

Fatal error: Unable to find local grunt.

If you're seeing this message, grunt hasn't been installed locally to
your project. For more information about installing and configuring grunt,
please see the Getting Started guide:

http://gruntjs.com/getting-started

3-2. package.jsonを作成

Gruntを使うには「package.json」と「Gruntfile.js」というファイルが必要です。プロジェクトのディレクトリは下記のようになります。

project
┣ package.json
┗ Gruntfile.js

それでは、「pakage.json」を作成するために下記コマンドを実行します。

ディレクトリの移動については以前書いたこちらの記事内で簡単に説明しているので、参考にしてみてください。

$ npm init

コマンドを実行するとReturnキーを押すたびに下記の項目に関して質問されます。Returnキーを連打していき最後に「Is this ok?」と表示された後にもう一度Returnキーを押します。すると、プロジェクトのフォルダー内に「package.json」というファイルが作成されます。

  • package name: (project-name)
  • version: (1.0.0)
  • description:
  • entry point: (index.js)
  • test command:
  • git repository:
  • keywords:
  • author:
  • license: (ISC)
 "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"

Is this ok? (yes) 

作成された、「package.json」の中身はこんな感じです。

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

3-3. gruntモジュールをインストール

プロジェクトごとにGruntのバージョンが違うこともあるので、gruntモジュールは個別にインストールします。(※-gオプションは付けないように!)

$ npm install grunt --save-dev

先ほど、作成した「package.json」の中身を確認してみるとgruntモジュールが追加されています。

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1" // 追加されたgruntモジュール
  }
}

3-4. プラグインをインストール

続いて、Gruntのプラグインをインストールします。npm install プラグイン名 --save-devコマンドで、任意のプラグインをインストールします。

コマンド実行後、プラグインは「node_modules」フォルダ内にインストールされます。

$ npm install grunt-contrib-cssmin --save-dev
  • grunt-contrib-cssmin : CSSファイルを圧縮する
  • grunt-contrib-uglify : JavaScriptファイルを圧縮する。
  • grunt-contrib-watch : ファイルの変更を監視する。
  • grunt-contrib-sass : Sassファイルをコンパイルする。
  • grunt-contrib-concat : ファイルの繋ぎ合わせる。
  • grunt-contrib-compress : ファイルやディレクトリをzipなどの形式で圧縮する。

他にもたくさんのプラグインがあるので、好みのものも探してみるのもいいかもしれません。プラグインを探す際には、検索フォームにcontribと入力し★マークの付いた信頼性の高いプラグインに絞り込んでから選ぶことをおすすめします。

Grunt公式サイト

package.json

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-cssmin": "^2.2.1", // インストールしたプラグイン名
    "grunt-contrib-watch": "^1.0.0"  // インストールしたプラグイン名
  }
}	

プラグインがインストールされると「package.json」にその情報が記述されます。

3-5. Gruntfile.jsを作成

次は実際にGruntを使用するのに必要となる「Gruntfile.js」を作成します。「package.json」と同じ階層にファイルを作成したら、initConfigloadNpmTasksregisterTaskの3つを下記の様に記述します。

module.exports = function(grunt){

  grunt.initConfig({
  //ここに実行内容を記述
  });
  //プラグインからタスクを読み込む
  grunt.loadNpmTasks('プラグイン名');
  //タスクの登録
  grunt.registerTask('default',['タスク名'])	
};

この中に先ほどインストールしたプラグインで設定をそれぞれ記述して保存します。

Gruntfile.js

module.exports = function(grunt){

  grunt.initConfig({
	cssmin: {   // ファイルを圧縮
	  compress: {
	    files: {
			'./min.css':['css/reset.css','css/style.css']
		}
	  }
	},
	watch: {   // ファイルが変更したかを監視
	  files:['css/*.css'],  
	  tasks:['cssmin']
	}
  });
  
  grunt.loadNpmTasks('grunt-contrib-cssmin'); //プラグインを読み込む
  grunt.loadNpmTasks('grunt-contrib-watch'); //プラグインを読み込む

  grunt.registerTask('default', ['cssmin','watch']); //タスクの登録

};

保存が完了したら、下記コマンドを実行。すると「min.css」という名前のファイルが作成されます。

$ grunt

「min.css」の中身をみてみると、「reset.css」と「style.css」の内容は集約され、改行やコメントアウトは省略された状態で保存されていると思います。

これで、CSSファイルが更新される度に、「min.css」が自動更新される設定が完了しました。


Gruntを使用すればちょっと面倒くさい作業も自動でやってくれるようになるのでとても便利です。他にも便利なプラグインがあるので後日追記したいと思います。

Leave a Comment