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

フォントの機能を使えるCSS3のFont feature settingsとはフォントの機能を使えるCSS3のFont feature settingsとは

CSS3でWebフォント機能が追加され、異なるデバイス上でも同じフォントの表示が可能になったことをご存じの方も多いと思います。CSS3のフォントに関する仕様ではその他にも様々な機能が追加されており、そのひとつが今回ご紹介するfont-feature-settingsプロパティです。 Webフォントで利用できるフォントフォーマットにはTTF(True Type Font)、OTF(Open Type Font)、EOT(Embedded OpenType)、SVG Font(Scalable

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を使用して縦組みを表現しています。

HTML5を使うべき10の理由HTML5を使うべき10の理由

プラグイン vs HTML5 それぞれの「適材適所」のエントリーの解説編です。続いてHTML5の判断材料です。同じく10項目挙げてみました。また文章ばかりです。 ○スマートフォン向けである(特にiOSも対象) iOSではPlug-inが排除されているのですから、何の余地もありません。またターゲットをAndroid等のスマートフォンに特化できるなら、HTML5が良いかと思います。Flash PlayerはAndroid OS2.2から対応していますが、パフォーマンスを出すには繊細にチューニングした開発が必要です。ただし、注意が必要なのは、HTML5で画面を作ったからといって、PCでもスマートフォンでもOK!という訳にはいきません。タッチやジェスチャに対応した画面作りが必要で、AppleのUIデザインガイドラインに従わないと違和感のある画面となります。