前書き
前回の記事を投稿したら、
「何でBundler入ってんのに、sudo gemとかやってんすか？？意味が分かりません。大体、そんな情報をWebに流すとか(ry」
と叱られたので、Bundler使ってるバージョンを、、、
情報
環境
| name | version |
|---|---|
| Mac OS X | 10.9.3 |
| Bundler | 1.6.0 |
| Sass | 3.2.19 |
| Compass | 0.12.6 |
| StyleDocco | 0.6.6 |
| Node.js | 0.10.28 |
| npm | 1.4.13 |
| grunt | 0.4.5 |
| grunt-cli | 0.1.13 |
| grunt-contrib-compass | 0.8.0 |
| grunt-styledocco | 0.1.4 |
| grunt-este-watch | 0.1.16 |
参考にした情報
Compass環境の構築
https://gist.github.com/geckotang/6332562
構造
全ての作業が終わると、下記の様な構造になります。
develop
|--grunt
|--Gemfile
|--Gemfile.lock
|--grunt-test
|--Gruntfile.js
|--config.rb
|--node_modules
|--package.json
|--scss
|--assets
|--css
|--images
|--js
|--docs
|--styleguide
|--vendor
|--bundle
開発環境構築手順
Node.js, npm, Bundlerはインストール済みである事を前提に進めます。
"Node.js"のインストール
省略
"npm"のインストール
省略
"Bundler"のインストール
省略
"Sass", "Compass"のインストール
ここでBundlerを使用します。
※前回、Sass v3.3.8を使用しましたが、2014年6月8日現在、Bundlerを使用してインストールできるバージョンはSass v3.2.19になります。
"Gemfile"の作成
$ cd ~/develop/grunt
$ bundle init
これで現在のディレクトリー配下にGemfileが生成されます。
"Gemfile"の編集
今回は、上書きしました。
# A sample Gemfile
source "https://rubygems.org"
gem "sass", "~> 3.2.19"
gem "compass", "~> 0.12.6"
"Sass", "Compass"のインストール
develop/gruntディレクトリーにて、bundle installを実行します。
--pathオプションを使用し、develop/grunt/vendor/bundleにgemがインストールされる様にします。
$ bundle install --path vendor/bundle
"Compass"
"Compassプロジェクト"の作成
Compassのインストールは完了しているので、早速Compassプロジェクトを作成します。
Bundlerを使用したインストールを行っているため、bundle exec compass createといった形式で実行する必要があります。
尚、bundle execを頭につけない方法もありますが、これについては他の方が書かれている記事を参考にしてください。
$ cd ~/develop/grunt
# compassプロジェクトを作成します。
$ bundle exec compass create grunt-test
# stylesheetsというディレクトリーが生成されますが、今回は不要なので削除します。
$ rm -R grunt-test/stylesheets
# sassというディレクトリーが生成されますが、今回はscssなのでリネームします。
$ mv grunt-test/sass grunt-test/scss
"config.rb"の修正
http_path = "/"
# SCSS(Sass)ファイルの置き場所
sass_dir = "scss"
# コンパイルのCSSファイルの置き場所
css_dir = (environment == :production) ? "assets/css" : "docs/css"
# 画像ファイルの置き場所
images_dir = "assets/images"
# JavaScriptの置き場所
javascripts_dir = "assets/js"
# CSSの出力方法
output_style = (environment == :production) ? :compressed : :expanded
# 既存のファイルを上書きするか否か
force = true
# コンパイル時に、SCSS内の行番号を出力するか否か
line_comments = (environment == :production) ? :false : :true
"StyleDocco"
$ npm install -fg styledocco
"Grunt"のインストール
"grunt-cli"のインストール
Gruntをコマンドラインから利用するために、grunt-cliパッケージをインストールします。
$ npm install grunt-cli -g
-g オプションは"グローバル"というオプションです。
グローバルオプションを指定する事により、作業ディレクトリー外のどんな場所でもgruntコマンドが使用可能になります。
"Grunt"本体のインストール
CompassプロジェクトのディレクトリーにGrunt本体をインストールします。
$ cd ~/develop/grunt/grunt-test
$ npm init
# 色々と聞かれますが、基本はデフォルトでOKです。
# entry point: (index.js) のみ Gruntfile.js を指定しました。
# このコマンドで、package.jsonが生成されます。
$ npm install grunt --save-dev
--save-dev オプションは 作業ディレクトリーに配置される package.json に依存性を記述するためのオプションです。
複数人で開発を行う場合、package.json を共有する事により、同様の開発環境を簡単に構築する事が出来ます。
"Gruntプラグイン"のインストール
既にGruntを便利に使うためのプラグインが複数用意されています。
プラグインは、公式サイトから探す事が可能です。
今回は、下記のプラグインを使用します。
- grunt-contrib-compass - Compassのコンパイル
- grunt-styledocco - StyleDoccoによるCSSスタイルガイド作成
- grunt-este-watch - ファイルの監視
まとめてインストールします。
$ npm install grunt-contrib-compass grunt-styledocco grunt-este-watch --save-dev
"Gruntfile.js"の作成
bundle exec形式で実行される用に記述します。
-
grunt-contrib-compassには、bundleExecというオプションがあり、trueを指定する事でbundle exec形式で実行してくれます。 -
grunt-styledoccoのoptions.preprocessorには、頭にbundle execを追記します。
module.exports = function(grunt){
grunt.initConfig({
// grunt-contrib-compassの設定
compass: {
// 本番環境
dist: {
options: {
config: 'config.rb',
bundleExec: true,
environment: 'production' // 環境の指定
}
}
},
// grunt-styledoccoの設定
styledocco: {
dist: {
options: {
name: 'grunt-test',
preprocessor: 'bundle exec scss --compass'
},
files: {
'docs/styleguide': 'scss'
}
}
},
// grunt-este-watchの設定
esteWatch: {
options: {
dirs: ['scss'],
livereload: false
},
scss: function(filepath){
return ['compass', 'styledocco'];
}
}
});
grunt.loadNpmTasks('grunt-contrib-compass');
grunt.loadNpmTasks('grunt-styledocco');
grunt.loadNpmTasks('grunt-este-watch');
grunt.registerTask('default', ['compass', 'styledocco']);
grunt.registerTask('watch', ['esteWatch']);
};
"Grunt"の実行
任意のタイミングでコンパイル・スタイルガイドの生成をする場合
~/develop/grunt/grunt-testにて、gruntコマンドを実行します。
$ grunt
監視モードで、コンパイル・スタイルガイドの生成をする場合
~/develop/grunt/grunt-testにて、grunt watchコマンドを実行します。
$ grunt watch