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

Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]Parse.comを使ったサーバサイド実装不要のフロントエンド開発[前編]

ParseはBaaS(Backend as a Service)と呼ばれる、アプリに共通して必要となるバックエンドの機能を提供するクラウドサービスのひとつです。BaaSを利用することで、データの同期やユーザ管理、プッシュ配信、ソーシャル連携など、アプリごとに独自の開発を行うことなく効率よく開発を進めることができます。  Parseでは、iOS、Android、JavaScript、.NET、OS Xと様々なプラットフォーム向けのSDKが提供されています。今回はこのParseのJavaScript SDKを使ってみます。 新規アプリケーションの作成

WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれWebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

先日、1年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました!スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。 更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。 検証端末 今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。 AQUOS PHONE SERIE ISW16SH

縦書きに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’;}