Gruntで快適な環境を整備したい!【インストール編】

みなさんはHTML/JS/CSSベースの開発をする際、どんな開発環境で開発していますか?今回は快適な開発環境を目指して、Gruntというタスクの自動化ツールを使ってみます。使用するGruntのバージョンは0.4.1です。

Gruntとは…?

Gruntとは、ファイルのコピーや削除、JS/CSSのminifyなどの作業を自動化してくれるビルドツールです。Node.jsベースで動作しており、コマンドラインで使用します。ファイルのコピーや削除は人の手が入るほどミスが発生しがちです。また、JS/CSSのminifyはオンラインで行えるものもありますが、修正の度にすべてのファイルに手動で実行するのは大変手間がかかります。このような単純作業を自動化して、効率化を図ることができるのがGruntです。

Gruntのインストール

Gruntの動作には、Node.jsと、Gruntのコマンドラインインターフェースであるgrunt-cliが必要です。まず、この2つをインストールします。
 

■Node.jsのインストール

Node.jsはインストーラを使ってインストールします。Node.js公式サイトのトップページにINSTALLボタンがあるので、ここからインストーラをダウンロードしてください。画面の指示に従って進めて行けば、インストール完了です。コマンドプロンプトで「node -v」と入力し、バージョンが表示されればインストール成功です。

今回利用したバージョンは以下です。 

  • node 0.8.20
  • npm 1.2.11

■grunt-cliのインストール

続いて、コマンドプロンプトで以下を実行します。

   npm install -g grunt-cli

 
コマンドプロンプトで「grunt -v」と入力し、grunt-cliのバージョンが表示されればインストール成功です。「grunt-cli: The grunt command line interface. (v0.1.6)」のような表示が出ると思います。
 

■package.jsonの作成

gruntのコマンドラインインターフェースはインストールできましたが、まだgrunt本体はインストールされていません。次に、gruntのインストールに必要となるpackage.jsonを作成します。このファイルで、プロジェクト名やバージョン、依存パッケージなどの設定を保存しておきます。
任意のプロジェクトフォルダを作成し、プロジェクトフォルダ下で以下のコマンドを実行します。対話形式で必要な情報が質問されるので、都度入力します。何も入力せずEnterを推し進めていくだけでもデフォルト値の入ったpackage.jsonが作成されます。
 

   npm init

 
package.json出力例は以下です。README.mdが無いという警告(npm WARN)が出ることがありますが、README.mdというファイルを作成してテキストを追加しておくと出てこなくなります。空ファイルでは駄目なようでしたので、必ず何かしらのテキストを入れておいてください。
 

  {
     ”name”: “プロジェクトの名前”,
     ”version”: “0.1.0″,
     ”description”: “gruntの環境定義だよ”,
     ”repository”: “”,
     ”author”: “Dai Nippon Printing Co., Ltd.”,
     ”license”: “BSD”,
     ”readmeFilename”: “README.md”,
     ”devDependencies”: {
      }
  }

■gruntをローカルにインストール

いよいよgruntの本体をインストールします。grunt本体は、プロジェクトフォルダごとにローカルにインストールする構成になっています。プロジェクトフォルダ下で以下のコマンドを実行します。

   npm install grunt –save-dev

「–save-dev」というパラメータをつけることで、そのプロジェクトで使用しているパッケージの情報をpackage.jsonに保存することができます。package.jsonのdevDependenciesの項目にgruntが追加されたのが確認できます。

   ”devDependencies”: {
“grunt”: “~0.4.1”
}

■必要なパッケージをインストール

JSやCSSのminify、ファイルの結合などの機能は、パッケージとして提供されています。grunt-contribというgrunt公式のプラグインパッケージをまるっとインストールするか、個別に必要なものをインストールします。

npm install grunt-contrib –save-dev

もしくは以下(例)

npm install grunt-contrib-cssmin –save-dev

パッケージ一覧

2013/4/23現在、grunt-contribに含まれているパッケージ一覧です。()の中はパッケージ名です。

JS/CSS縮小化系

  • CSSファイルの縮小化 (grunt-contrib-cssmin)
  • HTMLの縮小化 (grunt-contrib-htmlmin)
  • JSの縮小化 (grunt-contrib-uglify)
  • PNGやJPEGの画像最適化 (grunt-contrib-imagemin)

ファイル操作系

  • ファイル、フォルダの削除 (grunt-contrib-clean)
  • ファイル、フォルダの複製 (grunt-contrib-copy)
  • ファイルの結合 (grunt-contrib-concat)
  • gzip圧縮 (grunt-contrib-compress)

メタ言語等のコンパイル系

  • CoffeScriptのコンパイル (grunt-contrib-coffee)
  • Compassのコンパイル (grunt-contrib-compass)
  • LESSのコンパイル (grunt-contrib-less)
  • Sassのコンパイル (grunt-contrib-sass)
  • Stylusのコンパイル (grunt-contrib-stylus)
  • Jadeテンプレートのコンパイル (grunt-contrib-jade)
  • Handlebarsテンプレートのプリコンパイル (grunt-contrib-handlebars)
  • Underscoreテンプレートのプリコンパイル (grunt-contrib-jst)

構文チェック/テスト系

  • CSSの構文チェック (grunt-contrib-csslint)
  • JSの構文チェック (grunt-contrib-jshint)
  • jasmineによるテスト (grunt-contrib-jasmine)
  • Nodeunitによるテスト (grunt-contrib-nodeunit)
  • QUnitによるテスト (grunt-contrib-qunit)

その他

  • webサーバーへの接続 (grunt-contrib-connect)
  • Requirejsによるプロジェクトの最適化 (grunt-contrib-requirejs)
  • ファイルの更新監視 (grunt-contrib-watch)
  • LiveReload(ブラウザの自動リロード) (grunt-contrib-livereload)
  • YUIDocによるドキュメントの生成 (grunt-contrib-yuidoc)

Gruntfile.jsを作成する

最後に、プロジェクトディレクトリにGruntfile.jsファイルを用意します。Gruntで行いたいタスクの一覧はこのJSファイルに書いていくことになります。ベースとなるコードは以下です。

 module.exports = function(grunt){

‘use strict’;

grunt.initConfig({
// package.jsonに設定されている内容を取得
// バージョンや名称などの情報を外部ファイルで共通化できる
pkg: grunt.file.readJSON(“package.json”),

// タスクの設定
タスク名:{
// タスクの対象となるファイルのパスや出力先等の設定
}
});

// プラグインの読み込み
grunt.loadNpmTasks(“使用するプラグイン名”);

// タスクに名前をつける
// ”default” はgruntコマンドを入力した際に行うデフォルトのタスク
grunt.registerTask(“default”, [“タスク名”]);

};

Related Post

Canvasに画像を複数枚重ねて描画するにはCanvasに画像を複数枚重ねて描画するには

HTML5のCanvasには画像を組み込むことができます。Canvas上に複数枚の画像(透過PNG)をレイヤー状に順番に重ねたり、重ねた後の画像を取得する方法を解説します。 画像のプリロード  画像を複数枚重ねる場合、単に描画のループを回してしまうと読み込みが完了されたものから表示れ、重ねる順番が保障されない為、描画の前に順にImageオブジェクトを先読みしておきます。 var fileArry = [‘imgName1’,’imgName2’…]; // 読み込みたい画像のパスの配列 var

縦書きにWebフォントを使いたい!けど使えるのか検証してみた縦書きにWebフォントを使いたい!けど使えるのか検証してみた

最近、IT系の記事や勉強会でWebフォントの話題を見かけるようになってきました。以前の記事では、Webフォントサービスのデコもじを使ってRIAXDNPブログの記事タイトルのフォントを変えてみましたが、今回は縦書きにした文字にWebフォントを適用できるのか検証してみました。検証環境はWindows版Safari(5.1.2)とMac版Safari(5.1.1)です。 WEBフォントを使う Webフォントサービスを使わずに自分でフォントを定義する場合、フォントのライセンスに注意してください。今回のフォントデータはデモ用に弊社の秀英体開発室からお借りしました。CSS3では以下のように@font-face規則を使って、フォントを定義することができます。 @font-face {font-family:’DNPShueiMinPr5B’;      src:url(‘../../fonts/DNPShueiMinPr5-B.otf’) format(‘opentype’);} .myFontStyle {      font-family:’DNPShueiMinPr5B’;}

Webフォントを使用したスマートフォン向け秀英体見本帳を公開Webフォントを使用したスマートフォン向け秀英体見本帳を公開

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の6 書体を試験的にWebフォント化し、HTML版を作成しました。推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。 Flash版はこちら>Flash見本帳HTML版はこちら>スマートフォン向け秀英体見本帳(※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。)  チャレンジしたこと Webフォントでの縦書き表現 CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題(参照:縦書きにWebフォントを使いたい!けど使えるのか検証してみた)がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。