gruntでcompassをやや複雑にビルド
※ この記事はgrunt version 0.2.x のもので、grunt 0.3 からはAPIが変更されています
例えばこんなの
htdocs ├── common // サイト共通ファイル格納ディレクトリ │ ├── css │ │ ├── all.css // コンパイルしたやつまとめたい (A) │ │ ├── all.min.css // そんでminifyしたい (A) │ │ └── fragments │ │ ├── base.css │ │ ├── modules.css │ │ └── reset.css │ └── scss │ ├── base.scss // ↑cssにコンパイルしたい (A) │ ├── modules.scss // ↑cssにコンパイルしたい (A) │ └── reset.scss // ↑cssにコンパイルしたい (A) │ ├── category1 // カテゴリのディレクトリ │ ├── css │ │ ├── style.css // コンパイルされたやつ (B) │ │ └── style.min.css // そんでminifyしたい (B) │ ├── index.html │ └── scss │ └── style.scss // ↑cssにコンパイルしたい (B) │ ├── category2 // カテゴリのディレクトリ │ ├── css │ │ ├── style.css // コンパイルされたやつ (C) │ │ └── style.min.css // そんでminifyしたい (C) │ ├── index.html │ └── scss │ └── style.scss // ↑cssにコンパイルしたい (C) │ └── index.html // トップページ的な何か
grunt.js作る
var proc = require('child_process');
config.init({
watch: {
files: [
'common/scss/*.scss',
'category1/scss/*.scss',
'category2/scss/*.scss'
],
tasks: 'compass concat cssmin notifyOK'
},
compass: {
'common/scss': 'common/css/fragments',
'category1/scss': 'category1/css',
'category2/scss': 'category2/css'
},
concat: {
'common/css/all.css' : [
'common/css/fragments/reset.css',
'common/css/fragments/base.css',
'common/css/fragments/module.css'
]
},
cssmin: {
'common/css/all.min.css': 'common/css/all.css',
'category1/css/style.min.css': 'category1/css/style.css',
'category2/css/style.min.css': 'category2/css/style.css'
}
});
task.registerBasicTask('compass', 'compass compile', function( data, name ) {
var done = this.async();
var command = 'compass compile --sass-dir ' + name + ' --css-dir ' + data + ' --boring';
proc.exec(command, function(err, sout, serr){
if(sout.indexOf('error')>-1){
proc.exec("growlnotify -t 'COMPASS COMPILE ERROR!!!' -m '" + sout.replace(/^\s*/,'') + "'");
console.log('ERROR!');
done(false);
}else{
console.log('OK!');
done(true);
}
});
});
task.registerBasicTask('cssmin', 'minify css', function( data, name ) {
var done = this.async();
var command = 'sqwish ' + data + ' -o ' + name;
var out = proc.exec(command, function(err, sout, serr){
done(true);
});
});
task.registerTask('notifyOK', 'done!', function(){
proc.exec("growlnotify -t 'grunt.js' -m '\(^o^)/'");
});
task.registerTask('default', 'compass concat cssmin notifyOK');
これで
grunt watch
ってやるとwatchしてコンパイルしてくれる。エラーと完了でgrowlも出る。
このサンプル一式は以下
gruntについて、コレを実行するのに必要な sqwish, growlnotify, compass については以下参照。
blog comments powered by Disqus