第4のCSSプリプロセッサ「Roole」(v0.1.3)をGruntで自動化してみるメモ。
Rooleのgruntプラグインはまだないので、野良タスク（オリジナルのタスク）を作って直接rooleコマンドを叩く。
こんな感じのpackage.jsonをプロジェクトディレクトリに用意。
{
"name": "grunt-roole",
"version": "0.0.1",
"author": "konitter",
"devDependencies": {
"grunt-contrib-clean": "~0.4.0",
"grunt-contrib-concat": "~0.1.2",
"grunt-contrib-watch": "~0.2.0",
"grunt": "~0.4.0",
"grunt-contrib-cssmin": "~0.4.1",
"grunt-styleguide": "git://github.com/indieisaconcept/grunt-styleguide.git"
}
}
grunt-styleguideがリポジトリ指定なのは、Gruntの0.4リリース対応版がまだnpmに反映されてないようで、npm install grunt-styleguideでインストールすると自分の環境ではうまく動作しなかったため。
$ npm link
上記のコマンドを叩けば、必要なものが./node_modulesに入る。
こんな感じのGruntfile.jsを用意。
'use strict';
module.exports = function(grunt) {
grunt.initConfig({
roole: {
dist: {
input: 'src/roo',
output: 'src/css',
watch: ['src/roo/*.roo']
}
},
cssmin: {
compress: {
files: {
'dist/css/all.min.css': 'dist/css/all.css'
}
}
},
concat: {
css: {
src: ['src/css/*.css'],
dest: 'dist/css/all.css'
}
},
styleguide: {
dist: {
options: {
name: 'Style Guide',
},
files: {
'docs': 'src/css/*.css'
}
}
},
clean: ['docs'],
watch: {
roole: {
files: ['<%= roole.dist.watch %>'],
tasks: ['roole', 'concat', 'cssmin']
},
styleguide: {
files: ['src/css/*.css'],
tasks: ['clean', 'styleguide']
}
}
});
grunt.loadTasks('tasks');
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-clean');
grunt.loadNpmTasks('grunt-contrib-concat');
grunt.loadNpmTasks('grunt-styleguide');
grunt.registerTask('default', ['watch']);
};
roole: {...}がRoole用の設定。
inputとoutputの値をtasks配下に置いたタスクファイルroole.jsで読み込む。
オリジナルのタスクファイルを読み込む設定が、grunt.loadTasks('tasks');の部分。
roole.jsはこんな感じ。
module.exports = function(grunt) {
var log = grunt.log,
exec = require('child_process').exec,
child;
grunt.registerMultiTask('roole', 'Compile your roole!', function() {
var options = grunt.config('roole'),
done = this.async(),
cmd = 'roole ' + options.dist.input + ':' + options.dist.output;
child = exec(cmd, function(error, stdout, stderr) {
log.writeln('Running "' + cmd + '"');
if(error || stderr) {
log.write('Roole failed...').error();
done(false);
}
else {
log.write('Roole successed...').ok();
done(true);
}
});
});
};
grunt.config('roole')でGruntfile.jsに書いたプロパティを取ってきて、コマンドを作り叩く。
※Rooleは今どんどんアップデートされており、コマンドの書き方などは変わるかもしれませんのであしからず。
あとは以下を叩いておけば、src/roo/*.rooを監視して、更新があれば自動でコンパイル、スタイルガイド生成、結合、minifyをやってくれる。
$ grunt
Runnning "watch" task
Waiting...