Grunt vs Gulp

Grunt と Gulp で簡単なビルド環境を作って行くリポジトリです。

各ツールの設定を段階別でブランチに分けてあります。ブランチを切り替えた後に「Download ZIP」ボタンでそのブランチの最終版ソースコードをダウンロードできます。

Grunt

1. getting-started - サンプルの HTML/CSS/JS テンプレートが置いてあります。
2. grunt/init-grunt - Grunt の導入からタスク登録まで。
3. grunt/preview-task - ローカルサーバーを立ち上げる。
4. grunt/livereload-task - LiveReload 機能を導入する。
5. grunt/build-task - ビルド！（Unify & Minify, 画像圧縮、ブラウザーキャッシュ対応）
6. grunt/optimize-grunt - Grunt タスクをより使うやすく！

Gulp

1. getting-started - サンプルの HTML/CSS/JS テンプレートが置いてあります。
2. gulp/init-grunt - Grunt の導入からタスク登録まで。
3. gulp/preview-task - ローカルサーバーを立ち上げる。
4. gulp/livereload-task - LiveReload 機能を導入する。
5. gulp/build-task - ビルド！（Unify & Minify, 画像圧縮、ブラウザーキャッシュ対応）

Install

Node.js

Grunt, Gulp を使うには Node.js が必要です。

Grunt-CLI

Grunt を使うには grunt-cli がグローバルでインストールされている必要があります。

$ npm install grunt-cli --global

Gulp

Gulp を使うには gulp がグローバルでインストールされている必要があります。

$ npm install gulp --global

Node modules

Grunt, Gulp の各種プラグインは npm でインストールできます。

$ npm install <プラグイン名>

--save-dev オプションを付けるとインストールと同時にバージョン情報が package.json に記載されます。

$ npm install <プラグイン名> --save-dev

package.json に記載されているモジュールは npm コマンドより一括でインストールできます。

$ npm install