Grunt+Compassでフロント環境構築【導入編】

目次

1. Grunt+Compassでフロント環境構築【導入編】
2. compassでsassのコンパイル・スプライト画像生成
3. Gruntfile.js作成

Gruntで何を解決するか

昔：

・html,css,js(or jquery)のシンプルな構成

今：

html,sass(cssへのコンパイル),js,テンプレートエンジン

• 各種使用ライブラリ増加に伴いライブラリのバージョン管理(require.js,jquery,zept,lodash・・）
• それら各タスク管理
• sassのコンパイル
• スプライト画像の生成
• js,cssの結合、ミニファイ

　
これらを肥大したタスクを一元管理する

本件におけるGruntで行う内容

コンパイル・結合・圧縮等、各タスク管理。
local,dev,本番等環境別タスクを一元管理する。

compassで行うこと

sassのコンパイル,圧縮

Grunt導入

#最新にしてインストール
npm update
sudo npm install -g grunt-cli
#確認
grunt -version

#プロジェクトのルートディレクトリに移動
npm init
#Gruntプラグイン導入。
npm install プラグイン名　—save-dev

Compass導入

sudo gem update --system
sudo gem install sass
sudo gem install compass

#バージョン確認
compass -v
sass -v

#開始
compass create

続き: compassでsassのコンパイル・スプライト画像生成