黒い画面が苦手な人でもgruntが使いやすくなる！「grunt-devtools！」

話題になりまくりなgruntなんですけど、やっぱり黒い画面がどうしても苦手っていう方はいっぱいいらっしゃいますよね。chromeのdevTools上からgruntをgui的に操作出来る、grunt-devtoolsを紹介します。
コマンドが苦手な人にオススメです！

まずはインストール

一応この投稿ではgruntが動く状態で話を進めます。
もし環境が整って内容であれば、gruntの環境開発に付いてのエントリーを書いたので見てみてください

• Grunt.jsの始め方 -Grunt.jsの概要編-
• Grunt.jsの始め方 -インストール編-
• Grunt.jsの始め方 -タスク編集とsass編-

環境が整ったら、以下のコマンドを実行してインストールします。

gruntfile.jsにも下記を入れておきます。

これでインストールは完了です。

chromeのエクステンションをインストール

このツールはchromeのdevToolsからgruntを操作出来るものなので、chromeに専用のエクステンションを入れなくてはいけません。
下記をインストールしてください。

サンプルのgruntFile.js

今回サンプルで使ったgruntfileはこんな感じです。
grunt-devtools以外にgrunt-contribを入れてます。

module.exports = function(grunt){
grunt.initConfig({
watch: {
compass: {
files: [‘../styles/sass/*.scss’],
tasks: [‘compass’] }
},
compass: {
dist: {
options: {
sassDir: ‘../styles/sass’,
cssDir: ‘../styles/css’,
environment: ‘production’,
config: ‘../styles/config.rb’
}
}
}
});
grunt.loadNpmTasks(‘grunt-contrib’);
grunt.loadNpmTasks(‘grunt-devtools’);

grunt.registerTask(‘default’, [‘watch’]);
};
[/javascript]

単純なタスクになっていて、compassのコンパイルをwatchするだけです。

起動してみる

以下のコマンド入力してみてください。

そうするとターミナルに以下の情報が出てきます。

この表示が出たらdevToolsを開いてみください。

1. devtoolsにgruntというタブが出ていると思います。
2. ここには作ったタスクが入っています。このサンプルではdefaultです
3. この項目にはインストールしたプラグインが記載されてます。contribがまとめてたくさんのファイルを入れてくれています。

このサンプルではwatchを押すと、sassファイルを監視して、コンパイルしてくれるので、watchをクリックします。

watchのプラグインが実行されます。

次に、defaultをクリックするとここに登録されているタスクが実行されます。

同じようにdefaultのタスクが起動してwatchが動いていると思います。

こんな感じで最初にコマンドでgrunt-devtoolsを起動する必要はありますが、その後はGUIで操作が出来ます。

実際の使い方

ここまでに書いたようにこれを使えばGUIでもgruntが使えます。
エンジニアの方に、gruntfileは作ってもらって、後はこのgrunt-devtoolsをうまく使ってGUIで操作をすれば、黒い画面が苦手な方でも、うまく一緒に作業が出来るようになると思います。
ではでは