Grunt.js 処理中にsayコマンドを実行すると開発も気持ちスピーディに!?
はい、ネタです。みんな大好き sayコマンド。
MacOSではターミナルで say hogehoge と実行すると喋ります。
$ say hello world !!
｢hello world!!｣ 出来ましたよね。
話は代わって、Grunt.js では grunt-exec を使うことでシェルコマンドが実行出来ます。
よくGruntの処理が終わったらGrowlで結果を表示したり、処理に応じていろんな出力を行っています。
そこでGrunt実行中に処理の内容をsayコマンドで喋らせれば面白いんじゃないかと思い、やってみました。
手順
ベースはこのgrunt-contrib-livereloadの記事です。
(今回の分もgistに一式おいてあります。)
流れとしては次の通りです。
- grunt-exec をロード
- execで使用するsayコマンドを記述
- 各タスクごとに設定したコマンド処理を埋め込む
package.json
package.jsonに grunt-exec を追加します。$ vim package.json
{
"name": "grunt-say-hello",
"version": "0.1.0",
"Dependencies": {},
"devDependencies": {
"grunt": "~0.4.0",
"grunt-contrib-connect": "~0.1.2",
"grunt-contrib-livereload": "~0.1.1",
"grunt-regarde": "~0.1.1",
"grunt-exec": "~0.4.0" //追加
}
}
$ npm install
必要なモジュールがインストールされました。
Gruntfile.js
grunt-exec をロードします。 //...
grunt.loadNpmTasks('grunt-regarde');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-livereload');
//grunt-exec load
grunt.loadNpmTasks('grunt-exec');
//...
grunt.initConfig にコマンドを登録します。
//...
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
exec: {
start: {
command: 'say grunt start!'
},
startlivereload: {
command: 'say livereload start!'
},
onlivereload: {
command: 'say livereload wow!'
}
},
connect: {
//...
後は、実行するタスクを追加します。
exec:xxxxが各コマンドとなります。
//...
// Configuration to be run (and then tested)
regarde: {
fred: {
files: '*.html',
tasks: ['livereload', 'exec:onlivereload']
}
}
//...
grunt.registerTask('default', ['exec:start', 'livereload-start', 'exec:startlivereload', 'connect', 'regarde']);
完成したGruntfile.js
'use strict';
var path = require('path');
var lrSnippet = require('grunt-contrib-livereload/lib/utils').livereloadSnippet;
var folderMount = function folderMount(connect, point) {
return connect.static(path.resolve(point));
};
module.exports = function (grunt) {
// Project configuration.
grunt.initConfig({
exec: {
start: {
command: 'say grunt start!'
},
startlivereload: {
command: 'say livereload start!'
},
onlivereload: {
command: 'say livereload wow!'
}
},
connect: {
livereload: {
options: {
port: 9001,
middleware: function(connect, options) {
return [lrSnippet, folderMount(connect, '.')]
}
}
}
},
// Configuration to be run (and then tested)
regarde: {
fred: {
files: '*.html',
tasks: ['livereload', 'exec:onlivereload']
}
}
});
grunt.loadNpmTasks('grunt-regarde');
grunt.loadNpmTasks('grunt-contrib-connect');
grunt.loadNpmTasks('grunt-contrib-livereload');
//grunt-exec load
grunt.loadNpmTasks('grunt-exec');
grunt.registerTask('default', ['exec:start', 'livereload-start', 'exec:startlivereload', 'connect', 'regarde']);
};
index.html
livereload で使う Htmlファイル を作成$ vim index.html
<!DOCTYPE HTML>
<html lang="ja_JP">
<head>
<meta charset="UTF-8">
</head>
<body>
Live reload now!!
</body>
</html> では実行します。
$ grunt
登録された'exec:start' と 'exec:startlivereload'が実行され、sayコマンドで記述している単語を喋ります。
次にindex.htmlを編集して保存すると'exec:onlivereload' で登録したコマンドを実行します。
最後に
今回は触れませんでしたが、concat での結合、Sass のコンパイル、ビルド完了時にsayコマンドを使ってもいいかもしれません。
これで、気分を盛り上げることでテンポよく開発が行えるのではないでしょうか? 一度試してみてください。
say コマンドは他にもオプションがあります。
また、日本語を使いたい場合は kyoko を使うことで 同じく日本語を喋らせることが可能です。