GruntとBowerを使ってWeb開発用のテンプレートを作成する

GruntとBowerがおもしろそうだったので試してみました。

はじめに

GruntはSassやCoffeeScriptのコンパイルやテスト実行などのタスクを自動化してくれるツール、BowerはCSS/JavaScriptのパッケージ管理ツールという感じ。Bowerは指定したバージョンのパッケージのダウンロードまではやってくれるけれど、GitHubのリポジトリ毎ダウンロードされるものもあるようで、必要なファイルの抽出とかまではやってくれない。そこで、GruntのタスクでBowerの実行からファイルの抽出までを自動化してみる。

インストール

GruntはNode.js上で動作するので、最初にnvmを使ってNode.jsをインストールする

nvmのインストール

GitHubのリポジトリをクローンして、zshenvに設定を追記する。

% git clone git://github.com/creationix/nvm.git ~/.nvm
% vi ~/.zshenv
[[ -s $HOME/.nvm/nvm.sh ]] && source $HOME/.nvm/nvm.sh
% nvm -v

Node.jsのインストール

nvmを使ってNode.jsをインストールする。最新の安定版を利用した。

% nvm install v0.10.13
% nvm alias default v0.10.13
% node -v
v0.10.13

grunt-cliをインストールする

node.jsのパッケージ管理ツールnpmを使ってBowerをインストールする。-gオプション付きだとグローバルでインストールされる。テンプレートごとに管理したいモジュールはオプションなしでローカルにインストールする。

% npm install -g grunt-cli

Bowerのインストール

同じくnpmを使ってBowerをインストールする。

% npm install -g bower

Gruntモジュールのインストール

npm initコマンドを実行すると、package.jsonが作成される。このファイルにインストールするGruntモジュールを記載する。npm innstallコマンドの実行でGruntモジュールがnode_modulesディレクトリ配下にインストールされる。package.jsonを直接編集しなくても、npm install grunt --save-devのようにすると、インストールと同時にpackage.jsonへの追加もしてくれる。

% npm init
いろいろ聞かれるので入力する

% vi package.json
{
  "name": "web_template",
  "version": "0.0.0",
  "description": "",
  "main": "",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "yukihir0",
  "license": "MIT",
  "devDependencies": {
    "grunt": "~0.4.1",
    "grunt-bower-task": "~0.2.3",
  }
}

% npm install

Bowerでパッケージのダウンロード

bower initコマンドを実行すると、bower.jsonファイルが作成される。Gruntと同じ要領で、bower install bootstrap --save-devのようにすると、ダウンロードと同時にbower.jsonへの追加もしてくれる。パッケージはbower_componentsディレクトリにダウンロードされる。

% bower init
いろいろ聞かれるので入力する

% bower install bootstrap --save-dev
% bower install backbone --save-dev
% bower install underscore --save-dev
% bower install jquery --save-dev

% vi bower.json
{
  "name": "web_template",
  "version": "0.0.0",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "bootstrap": "~3.0.0-rc1",
    "backbone": "~1.0.0",
    "underscore": "~1.5.1",
    "jquery": "~2.0.3"
  }
}

Gruntタスクの設定

GruntのタスクはGruntfile.jsに記載する。libディレクトリ配下にファイルをコピーするようにしてみた。コピーするファイルはbower.jsonに記載を追加する。記載が終わったら、gruntコマンドでタスクが実行できる。

% vi Gruntfile.js

module.exports = function (grunt) {
  'use strict';
  grunt.initConfig({
    pkg: grunt.file.readJSON("package.json"),
    bower: {
      install: {
        options: {
          targetDir: './lib',
          layout: 'byType',
          install: true,
          verbose: false,
          cleanTargetDir: true,
          cleanBowerDir: false
        }
      }
    },
  });
  grunt.loadNpmTasks('grunt-bower-task');
  grunt.registerTask('default', ['bower:install']);
};

% vi bower.json

{
  "name": "web_box",
  "version": "0.0.0",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "devDependencies": {
    "bootstrap": "~3.0.0-rc1",
    "backbone": "~1.0.0",
    "underscore": "~1.5.1",
    "jquery": "~2.0.3"
  },
  "exportsOverride": {
    "bootstrap": {
        "js": "dist/js/bootstrap.min.js",
        "css": "dist/css/bootstrap.min.css"
    },
    "backbone": {
      "js": "backbone-min.js"
    },
    "underscore": {
      "js": "underscore-min.js"
    },
    "jquery": {
      "js": "jquery.min.js"
    }
  }
}

% grunt

初期状態から実行する

ここまでで作成したpackage.json、bower.json、Gruntfile.jsをリポジトリに格納しておけば、npm installとgruntコマンドの実行で指定したバージョンの必要なパッケージがしかるべきディレクトリにダウンロードされる。すばらしい！！

% npm install
% grunt

まとめ

GruntとBowerを使って、CSS/JavaScriptパッケージのダウンロードと抽出を自動化してみた。こんな感じで必要なパッケージを追加してけば、自分用のWeb開発テンプレートが作成できる。Gruntモジュールにはテスト実行やWebサーバLiveReloadをしてくれるものもあるみたいなので試してみたい。

• Grunt
• Bower