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

Sass/Compassを使ってCSSスプライトに挑戦してみました。Sass/Compassを使ってCSSスプライトに挑戦してみました。

CSSスプライトを作成する機会があったため、最近よく耳にするSassとCompassを使ってみました。CSSスプライトとは、複数の画像を1枚の画像としてまとめ、CSSで表示範囲を指定することにより表示する手法です。画像のリクエスト数を削減することができるため、高速化の手法の1つとして利用されています。 Sass/Compassについて  Sassとは、CSSの拡張メタ言語です。独自の文法で記述したファイルをコンパイルして、CSSを生成します。独自の文法といっても、CSSをそのまま書くこともできますし、CSSをベースに拡張されているので学習コストは低いです。変数や演算、ミックスインと呼ばれる関数のような仕組みや継承、条件式などの文法があり、CSSの冗長性や保守性、生産性の悪さを解消することができます。公式サイトは英語ですが、enja-ossというプロジェクトでリファレンスの日本語訳が進められているようです。 次にCompassとは、sassのフレームワークで、様々なミックスインやスタイルが用意されています。CSSスプライトをはじめ、ベンダープレフィックスを自動で追加してくれたり、sassファイルの変更を監視して自動でコンパイルしたりと便利な機能が満載です。今回は、このCompassのCSSスプライトの機能を使ってみます。Sass/Compassのインストール、設定ファイルの記述については割愛します。 CompassでCSSスプライト  CSSスプライトを生成するためには、まずSass管理下の画像ディレクトリ内に任意のディレクトリを作成し、スプライトの元となる画像を用意します。今回は以下のような構成で画像を用意しました。 続いて、.scssファイルを用意します。最低限書かなければいけないのは、以下の4行です。この4行で、指定したフォルダ内の画像をCSSスプライト画像にまとめ、表示用クラスを生成することができます。  @charset “utf-8”; @import

Kii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装するKii Cloud JavaScript SDKを使ってアカウント登録とログイン機能を実装する

本記事は、Kii Cloud JavaScript SDKを使ったサーバサイド実装不要のフロントエンド開発[準備編]の続編です。準備編では、新規アプリケーションの作成からKii CloudのJavaScript SDKの概要までをご紹介しました。今回は、アカウント登録とログイン機能の実装についてご紹介します。※JavaScript SDKのv2.1.20から仮ユーザーの機能が追加され、アカウント登録をしない状態でもデータ操作が可能となったようです。 アカウント登録

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

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