[Grunt & Yeoman] grunt-contrib-compass で Compass のコンパイルと監視を行う
grunt を利用して、Compass を実行する環境を作っていきます。
Contents
config.rb
compass で利用している config.rb を設定を、そのまま活かして組み込みます。
config.rb
css_dir = "src/stylesheets"
sass_dir = "src/sass"
images_dir = "src/images"
javascripts_dir = "src/javascripts"
output_style = (environment == :production) ? :compressed : :expanded
relative_assets = true
line_comments = (environment == :production) ? :false : :true
% compass init
directory src/sass/
directory src/stylesheets/
create src/sass/screen.scss
create src/sass/print.scss
create src/sass/ie.scss
create src/stylesheets/ie.css
create src/stylesheets/print.css
create src/stylesheets/screen.css
*********************************************************************
Congratulations! Your compass project has been created.
:
src
├── sample.html
├── sass
│ ├── ie.scss
│ ├── print.scss
│ └── screen.scss
├── stylesheets
│ ├── ie.css
│ ├── print.css
│ └── screen.css
└── vendor
ここまではいつも通りです。
インストール
% npm install grunt-contrib-compass --save-dev
% npm install grunt-contrib-watch --save-dev
もしくは
% npm install grunt-contrib --save-dev
Gruntfile
config.rb を読み込んで、環境設定を指定するには、こんな書き方になります。
config.rb の設定を上書きしたり、使わずに表現することもできます。
cssDir: '<%= dir.dest %>/stylesheets'
上記のように production のみコンパイルされたcssを別のディレクトリに書き出すよう、設定を追加してみます。
'use strict'
module.exports = (grunt) ->
grunt.loadNpmTasks('grunt-contrib');
# グラントタスクの設定
grunt.initConfig
# config
dir:
src: 'src'
dest: 'dist'
pkg: grunt.file.readJSON "package.json"
compass:
dev:
options:
config: 'config.rb'
environment: 'development'
force: true
prod:
options:
config: 'config.rb'
environment: 'production'
force: true
cssDir: '<%= dir.dest %>/stylesheets'
# watchの設定
watch:
files: ['<%= dir.src %>/sass/*.scss']
tasks: ['compass:dev']
# タスクコマンドの設定
grunt.registerTask 'default', ['compass']
監視には watch を利用します。
対象ファイルとタスクを指定します。
実行する
監視を始めます。
compass watch を始めることになりますね。
% grunt watch
Running "watch" task
Waiting...OK
ファイルを追加すると、コンパイルが完了しました。
>> File "src/sass/style.scss" added.
Running "compass:dev" (compass) task
overwrite src/stylesheets/ie.css (0.082s)
overwrite src/stylesheets/print.css (0.02s)
overwrite src/stylesheets/screen.css (0.105s)
create src/stylesheets/style.css (0.066s)
Compilation took 0.381s
Done, without errors.
Completed in 54.906s at Wed Nov 13 2013 19:37:43 GMT+0900 (JST) - Waiting...
grunt compass すると、prod も実行されるため、dist/stylesheets/ 以下に compressed ファイルが書き出されます。
% grunt compass
Running "compass:dev" (compass) task
identical src/stylesheets/ie.css (0.063s)
identical src/stylesheets/print.css (0.001s)
identical src/stylesheets/screen.css (0.093s)
identical src/stylesheets/style.css (0.018s)
Compilation took 0.192s
Running "compass:prod" (compass) task
directory dist/stylesheets/
create dist/stylesheets/ie.css (0.004s)
create dist/stylesheets/print.css (0.001s)
create dist/stylesheets/screen.css (0.028s)
create dist/stylesheets/style.css (0.001s)
Compilation took 0.036s
Done, without errors.
だいぶ全体の動きが理解できてきました。