技術の犬小屋

Webプログラミングを餌に生きる犬のメモ帳

Gruntを使い始めてから半年経った。Gruntは主にJavascriptとCSSファイルのminifyを自動化する目的で使用している。
 

Gruntとは

Gruntとは,JavaScriptで書いたタスクを実行してくれるアプリケーション(JavaScript Task Runner)である。
面倒な作業として,以下のような作業があるが,Gruntを使うことでこれらを自動化することが出来る。

  • minify(圧縮)や結合
  • 単体テストの実行
  • JSLint(構文チェック)の実行
  • CoffeeScriptやTypeScriptを使用している場合にはコンパイル(JavaScript変換)の実行
  • SCSS(Sass)やLESSなどのCSS拡張メタ言語を使用している場合には,コンパイル(CSS変換)の実行

 

Gruntの使い方

GruntはNode.jsを使用して作られている。そのため,Gruntをインストールする際には,あらかじめhomebrewなどでNode.jsをインストールしておく必要がある。
 

Gruntのインストール

Gruntは,Grunt本体とgrunt-cliが組み合わさって動作する。そのため,Grunt本体とgrunt-cliを一緒にインストールするが,コマンドから直接インストールするのではなく,package.jsonというファイルを作成し,このファイルを介してインストールする。
package.jsonを作成し,以下のように記述する。

{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.3",
    "grunt-cli": "~0.1.9"
  }
}

 
package.jsonが存在するディレクトリで,以下のコマンドを実行することで,package.jsonに記述したnodeモジュールをインストールすることが出来る。今回の場合は,Gruntをインストールすることが出来る。

npm install

 
このpackage.jsonというファイルは,Node.jsのプロジェクトにおいて、そのプロジェクトの名称やバージョン,依存するモジュールを書いておくためのファイルである。Grunt自体も,このpackage.jsonを使って利用するプラグインを管理し,そしてGrunt自体もこのファイルへ依存モジュールとして登録する。
Gruntが,このような回りくどい管理方法を取っている理由は,Gruntのバージョンが異なるプロジェクトを単体のGruntでは同時に管理できない為である。
例えば,プロジェクトAではバージョン0.3.1を使っているが、プロジェクトBでは0.3.16を使っていて、マシンにはGrunt 0.3.16がインストールされている……という場合,始めのプロジェクトがビルドできなくなってしまう可能性がある。
 
続いて,Gruntfile.jsというgruntの設定ファイルを作成する。
一纏めにして実行出来る個々の設定を「タスク」と呼ぶ。以下の内容でGruntfile.jsを作成する。

module.exports = function (grunt) {

  grunt.registerTask('hello', 'description here', function() {
    grunt.log.writeln('hello World!');
  });

  grunt.registerTask('default', [ 'hello' ]);

};

 
この状態で, grunt コマンドを実行し,以下のように表示されれば,タスクが成功している。

Running "hello" task
hello World!

Done, without errors.

 

JavascriptとCSSを自動的にminifyしてみる

今回,冒頭で触れたJavascriptとCSSのファイルをminifyする方法を説明する。
 

プラグインを追加インストールする
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.3",
    "grunt-cli": "~0.1.9",
    "grunt-contrib-cssmin": "0.4.1",
    "grunt-contrib-uglify": "~0.4.0",
    "grunt-contrib-watch": "~0.5.3"
  }
}

 
上記のようにpackage.jsonに追記し,以下のプラグインを新たにインストールする。

  • grunt-contrib-cssmin
  • CSSファイルをminifyする。

  • grunt-contrib-uglify
  • JSファイルをminifyする。

  • grunt-contrib-watch
  • ファイルの変更を監視してタスクをトリガーする。

 
おなじみのコマンドでプラグインをインストールする。

npm install

 

Gruntfile.jsを作成する

プラグインがインストール出来たので,Gruntfile.jsにタスクを記述する。

module.exports = function(grunt) {
  grunt.initConfig({
    cssmin : {
      pc : {
        src : ['css/reset.css', 'css/styles.css'],
        dest : 'css/pc.min.css'
      },
      mobile : {
        src : ['css/reset.css', 'css/styles.css', 'css/mediaqueries.css'],
        dest : 'css/mobile.min.css'
      }
    },
    uglify : {
      build : {
        options : {
          banner : grunt.file.read('js/License.js'),
        },
        src : ['js/BitmapData.js', 'js/GlowFilter.js'],
        dest : 'js/all.min.js'
      }
    },
    watch : {
      css_pc : {
        files : ['css/reset.css', 'css/styles.css'],
        tasks : ['cssmin', 'copy:css']
      },
      css_mobile : {
        files : ['css/mediaqueries.css'],
        tasks : ['cssmin:mobile', 'copy:css']
      },
      js : {
        files : ['js/BitmapData.js', 'js/GlowFilter.js', 'js/License.js'],
        tasks : ['uglify', 'copy:js']
      }
    },
  });

  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-watch');
};

 
各プラグイン毎の設定方法は以下のページに詳しく載っていた。
Plugins – Grunt: The JavaScript Task Runner
 
 
以上
 
 
参考
現場で使えるGrunt入門 – Gruntを試そう | CodeGrid
「今どきのGruntを使ったフロントエンド開発(HTML/CSS編)」HTML5 Conference 2013 セッションレポート | HTML5Experts.jp
Gruntで始めるWeb開発爆速自動化入門(1):ブラックなWeb開発現場の救世主、Gruntのインストールと使い方 (1/2) – @IT

jQueryによるAjaxの使い方 arrow-right
Next post

arrow-left Jenkinsの使い方
Previous post

コメントを残す