2014/6/9 追記
scssファイルからStyleDoccoを生成するバージョンの記事を書きました。
Bundlerを使用して、CompassやSassをインストールしています。
本記事よりも有用性が高いと思いますので、宜しければご覧ください。
情報
環境
| name | version |
|---|---|
| Mac OS X | 10.9.3 |
| Ruby | 2.1.1p76 (2014-02-24 revision 45161) [x86_64-darwin13.0] |
| Sass | 3.3.8 |
| 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 |
参考にした情報
URL
http://www.qript.co.jp/blog/technique/1601/
http://toybox-design.net/?p=640
http://mnemoniqs.com/web/styledocco/
http://tech.nitoyon.com/ja/blog/2013/10/10/grunt-watch-slow/
書籍
Sass & Compass 徹底入門（初版）
構造
develop
|--grunt
|--grunt-test
|--Gruntfile.js
|--config.rb
|--node_modules
|--package.json
|--scss
|--assets
|--css
|--images
|--js
|--docs
|--css
|--images
|--js
|--styleguide
開発環境構築手順
"Node.js"のインストール
省略
"npm"のインストール
省略
"Sass"のインストール
$ sudo gem install sass
"Compass"のインストール
インストール
$ sudo gem install compass
"Compassプロジェクト"の作成
$ mkdir -p ~/develop/grunt
$ cd ~/develop/grunt
# compassプロジェクトを作成します。
$ 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 = (environment == :production) ? "assets/images" : "docs/images"
# JavaScriptの置き場所
javascripts_dir = (environment == :production) ? "assets/js" : "docs/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"の新規作成
まずはベースとなるGruntfile.jsを書きます。
module.exports = function(grunt){
grunt.initConfig({});
grunt.registerTask('default', []);
};
上記をベースとし、Gruntfile.js に設定をしていきます。
"Gruntfile.js"の設定
プラグインの設定を追加
先ほど作成したGruntfile.jsを編集します。
module.exports = function(grunt){
grunt.initConfig({
// grunt-contrib-compassの設定
compass: {
// 本番環境
dist: {
options: {
config: 'config.rb',
environment: 'production' // 環境の指定
}
},
// 開発環境（必要な場合は記述）
dev: {
options: {
config: 'config.rb',
environment: 'development'
}
}
},
// grunt-styledoccoの設定
styledocco: {
dist: {
options: {
name: 'grunt-test',
preprocessor: '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', 'esteWatch']);
};
"Grunt"の実行
gruntコマンドを実行するだけです。
$ grunt
コマンドを実行すると、監視状態に入ります。
develop/grunt/grunt-test/sass/**/*.scssを編集すると、CSSとスタイルガイドが自動生成されます。