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

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

まずはインストール

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

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

npm install grunt-devtools

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

grunt.loadNpmTasks('grunt-devtools');

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

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']);
};

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

起動してみる

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

grunt devtools

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

Running "devtools" task
>> Grunt Devtools v0.2.1 is ready! Proceed to the Chrome extension.

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

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

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

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

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

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

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

実際の使い方

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

Leave a Comment

お問い合わせ

お仕事の依頼や何か質問などあれば、こちらからお願いします〜。

Not readable? Change text.

Start typing and press Enter to search