Takazudo hamalog

programming notes. mainly about JavaScript / jQuery. [@Takazudo] [takazudo@gmail.com] Hint: alt + /

cool guy

gruntでcompassをやや複雑にビルド

2012/02/28 permalink

※ この記事は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

  1. wevnotehamalogからリブログしました
  2. hamalogの投稿です