2014年08月27日

GruntでJade

GruntでJadeをコンパイルしようとすると以下のようにする。ただこれだと対象ファイルが増えるたびに手動でGruntfile.jsにファイルを追加していかなくていはいけない。

module.exports = function(grunt) {
grunt.initConfig({
jade: {
compile: {
files: {
"dest/sample1.html": ["jade/sample1.jade"],
"dest/sample2.html": ["jade/sample2.jade"],
"dest/sample3.html": ["jade/sample3.jade"],
}
}
}
});
}


これは以下のようにするとjadeディレクトリ内のjadeファイルが更新された際にdestに書きだすようにすることができる。

module.exports = function(grunt) {
grunt.initConfig({
jade: {
compile: {
files: [ {
expand: true,
cwd: "jade/",
src: "*.jade",
dest: "dest/",
ext: ".html"
}]
}
}
});
}


あと、以下のように指定するとjadeディレクトリにある_xxx.jadeみないなアンスコ付きのファイルはコンパイル対象化から外すことができる。

module.exports = function(grunt) {
grunt.initConfig({
jade: {
compile: {
files: [ {
expand: true,
cwd: "jade/",
src: [
"*.jade",
"!_*.jade"
],
dest: "dest/",
ext: ".html"
}]
}
}
});
}


Gruntは面倒くさいので、みんなgulpを使おうよ。
タグ:Grunt JADE
posted by ねこまんま at 12:36 | Comment(0) | TrackBack(0) | Grunt | 更新情報をチェックする

2014年03月01日

初めてのGruntプラグイン - 非同期処理

初めてのGruntプラグイン - マルチタスクに引き続きGruntプラグイン作成。

Gruntではファイル操作など重めの処理を行っていると処理の合間にGruntの実行が終わってしまい処理中断されてしまいます。

async()で非同期処理を開始し、done()で次の処理にタスクを渡すことができます。

node.jsでファイルを作成と組み合わせると以下のようにするとマルチタスクでファイル作成が可能になります。

module.exports = function (grunt) {
grunt.registerMultiTask('sample', 'sample task', function () {
var done = this.async();
var option = grunt.config('sample')[this.target].option;
var data = "this is sample task!";
fs.writeFile(option.file, data , function (err) {
console.log(err);
done();
});
});
};
タグ:done() async() Grunt
posted by ねこまんま at 12:42 | Comment(0) | TrackBack(0) | Grunt | 更新情報をチェックする

初めてのGruntプラグイン - マルチタスク

前回の初めてのGruntプラグインに引き続きGruntプラグイン作成。

よくあるGruntプラグインのように実行条件を分岐したい場合の処理。たとえば次のようにGruntfile.jsを指定すると「gurnt sample:dev」と「grunt sample:prod」で実行条件を分けることができまる。

module.exports = function(grunt) {
//グラントタスクの設定
grunt.initConfig({
sample:{
dev:{
option:{
file:"hoge.txt"
}
},
prod:{
option:{
file:"hoge.mi.txt"
}
},
}
});
//プラグインの読み込み
grunt.loadNpmTasks('grunt-sample');
};


次のようにregisterTaskではなくregisterMultiTaskを利用する。

module.exports = function (grunt) {
grunt.registerMultiTask('cachebuster', 'sample task', function () {
console.log("this is sample task!");
});
};


optionで指定した値を取得するには次のようにgrunt.config()から値を取得できる。

module.exports = function (grunt) {
grunt.registerMultiTask('sample', 'sample task', function () {
var option = grunt.config('sample')[this.target].option;
console.log(option.file)
});
};
posted by ねこまんま at 12:31 | Comment(0) | TrackBack(0) | Grunt | 更新情報をチェックする

2014年02月27日

初めてのGruntプラグイン

ちょっと気になったのでNode.js - grunt-pluginの作り方と解剖 - Qiitaを参考にGruntプラグインの作り方を勉強中。

今回作成したのはコンソールに出力するだけのgrunt-sample、node_modules内にgrunt-sampleディレクトリを作り、package.json、tasksディレクトリを作成、tasksディレクトリ内にはsample.jsを作成してます。

node_modules
└── grunt-sample
├── package.json
└── tasks
└── sample.js


package.jsonには以下の内容を記述

{
"name": "grunt-sample",
"version": "0.0.1",
"description": "sample grunt plugin",
"keywords": [
"gruntplugin"
],
"devDependencies": {
"grunt": "~0.4.1"
}
}


sample.jsには以下の内容を記述。

module.exports = function (grunt) {
grunt.registerTask('sample', 'sample task', function () {
console.log('this is sample task!');
});
};


registerTaskでは「タスク名」、「タスクの説明」、「タスク」の順番で記述を行います。

最後にGruntfile.jsに以下の内容を記述

module.exports = function(grunt) {
//グラントタスクの設定
grunt.initConfig({
sample:{}
});
//プラグインの読み込み
grunt.loadNpmTasks('grunt-sample');
};


ターミナルから以下のコマンドを打つと先ほど設定したconsole.log()の内容が表示されます。

grunt sample
タグ:Grnt
posted by ねこまんま at 00:52 | Comment(0) | TrackBack(0) | Grunt | 更新情報をチェックする