Interfaceから使えるようにするパッケージで、グローバルと言うのはどのディレクトリにいてもgruntのコマンドを使えるようにするという意味で、これがなけばローカルです。Structureこれで下準備は整いました。つぎにGruntの構成ですがPackage.jsonとGruntfile.js(coffeescriptでも可)の2種類のファイルが必要です。試しに、grunt-cssoをというCSSを圧縮してくるれるGruntプラグインを使用できるところまで解説していきましょう。initPackage.jsonを作るには、上記のようなコマンドを打ちます。すると対話形式でいろいろ黒い画面が訪ねてきますので、適当にYESもしくはENTERキーを押し続けます。するとPackage.jsonのひな形が作成されます。--save-dev次にローカルモジュールのインストールをしていきます。先ほどのgrunt-cliはあくまでコマンドラインからgruntを利用するためだけのパッケージなので、ここでインストールするgruntが実質のパッケージです。v0.5のバージョンが出てきた時にプロジェクトごとに違うバージョンのgruntを共存することができます。--save-devというオプションは、パッケージをインストールする際にPackage.jsonにdevDependencyを追記してくれるものです。installすることで、Aさんと同じパッケージを一度でインストールすることができます。gruntfile次にGruntfileの作成ですが、少々面倒です。grunt-initというプラグインをインストールする必要があります。cloneでダウンロードしてきます。initのようにいろいろ黒い画面が問いてきますが、とりあえずはENTER押しておきましょう。することで、Gruntfileが作成されます。なんかいろいろ黒い画面いっぱいで面倒だなと思った方は、最初の内は同じようなことをしているGruntfileをGitHubで見つけてコピペして作れば問題無いです。task:grunt.loadNpmTasks('grunt-csso');Gruntfileの中身はいろいろ書かかれていますが、大事なのは3つの部分です。installしたパッケージを読み込む記述です。これがないとcssoのタスクが使えません。//....}});次がGruntファイルのメインとなる部分のタスクの設定の部分です。initConfig配下にタスクを記述していきます。distの部分はターゲットを表します。この部分の名前は別になんでも構いません。csso:devとコマンドを打てば、実行したいタスクを分離できます。cssoと打つとprodとdev両方のタスクが実行されます。distの下の階層には大抵処理したいファイルのインプットと処理したあとのファイルのアウトプット先、あと必要であればプラグインのオプションを記述しまうす。これらが基本的なタスクの設定で、この粒度でタスクをどんどん追加していきます。['csso']);最後にカスタムタスクを登録します。defaultを文字通りデフォルトでこの文字列で指定したタスクはgruntだけで実行できます。fooでcssoタスクを実行できます。CSSの縮小化、JSの縮小化、画像の最適化などの複数のタスクをまとめて任意のタスク名と登録することもできるので、かっこいタスク名考えときましょう。Runnerさて基本的なGruntの使い方はわかったので、今度は自分好みのGruntfileにしていきましょう。あなたが『こうゆうのあったら便利だなー』って思うプラグインはたいてい公式サイトのプラグインを検索すれば見つかることでしょう。それほどGruntのエコステムは巨大なものとなっています。同じような機能を提供するプラグインが2つ合った場合は基本的にはgrunt-contirb-***の名前がついたプラグインを選択すれば問題ないです。これはGruntjsチームが公式にメンテナンスしているプラグインという証なので。gruntpluginまた、もし自分のほしいプラグインが見つからなかったら自分で作っちゃいましょう。先ほどのgrunt-initでもgruntpluginのひな形を作ってくれるのでがんばってみましょう。私もあまりJavaScriptは書かないのですが、なぜかgruntプラグインをちょこちょこ書いてますので、良かったら使ってみてください。t32k:npmjsMaplet32k/mapleさて最後は僕のGruntfileの設定を紹介しておきます。この一年スマホのWebアプリを制作してきてた集大成をCSSフレームワーク:Mapleとして公開しています。CSSフレームワークといいながら今は全然CSSの部分作ってないですが、ベターなHTML/CSSを書く、パフォーマンス性の高いアプリを作成するために必要なGrunt設定ある程度できていますのでぜひ参考にしてみてください。t32k/maple基本的なことはコード読めば分かるかと思います。MapleのGruntfileはCoffeeScriptで書いてあります。いいても全然CoffeeScript分かんないですけど、Gruntfileってほぼ設定ファイルのようなものなので、コーフィーで書いたほうがシンプルで見やすいかなと思ってます。webappsで、ここまでいろいろ説明してきて頭がパンクされた方!大丈夫です!そんな方のために最速でGruntを動かす(Mapleプロジェクトを動かす)ためのコマンドを用意しました。YeomanというGruntとBowerを内包したツールがあります。これだけ(node.js必要ですが)でgruntを実行できますので、ぜひためしてみてください。gruntSummary僕自身も1年前まで普通のHTMLコーダーでGUIアプリ大好きっ子でした。『黒い画面』ってのは必要そうだなとは思ってましたし、使ったら便利なんだろうなとも思ってましたけど、軽く触った程度でわかんなくなってGUIのほうがいいや!と何度も投げ出したものです。触ってみる!動かす!ということを続けていれば、今ではGrunt(というかターミナル)無しではアプリ開発は考えれないほど手に慣れています。多くのデザイナーさんたちがこちら側に来ていただければ、もっとデザイナーに便利なNodeパッケージやGemなどが出てくるでしょうし、みんなの制作環境がハッピーになると思っていますので、ぜひとも、まずは一歩を踏み出す、そして動かす、続けるってことを実践するキッカケとなってくれれば幸いです。ありがとうございました。普段使ってるGruntプラグインまとめてみました。2013の1日目に寄稿した記事です。こうじ)1983年石川県生まれ。大学でデザインを専攻後、晴れてWebデザイナーになるが、コーディング好きが高じてWebデベロッパーに転身。