albatrosary's blog

UI/UXとエンタープライズシステム

デザイナーだってYEOMANを使いたいんだ! 〜 とあるデザイナーのためのYEOMANマニュアル - gruntコマンド編 〜

開発中もっとも使われるコマンドはgruntです。このgruntはJavaScriptで記述されたタスクランナーです。定義がGruntfile.jsにされていますので少し見ていきます。ここが分かると

  • grunt serve
  • grunt build

以外にもコマンドがあるのが理解できます。

ジェネレータwebappのGruntfile.js

grunt.registerTaskというキーワードを探します。すると

  • serve
  • server
  • test
  • build
  • default

という文字があります。これが利用する基本的なコマンドになります。それぞれ

$ grunt serve

$ grunt server

$ grunt test

$ grunt build

$ grunt default または $grunt

で実行します。基本的にと言ったのは、このコマンドはタスクをまとめたもので、タスクを個別に動かすことができます。たとえば

  • cssmin
  • htmlmin

などがそれにあたります。Gruntfile.jsを読むと分かるのですが難しいのでGoogleの「Grunt Devtools」を利用します。「Grunt Devtools」の使い方については

黒い画面使わなくたってGruntイケル! 〜 Chromeを拡張するかっこいい(と思うんだけど)「Grunt Devtools」〜 - albatrosary's blog

を読んで頂けると幸いです。

ジェネレータAngularのGruntfile.js

AngularのGruntfile.jsを見てもやはり

  • serve
  • server
  • test
  • build
  • default

が定義されています。まれにこういったコマンドと異なるものが定義されている場合があります。何か不明なことがあったらGruntfile.jsを見るようにしましょう。

最後に

YEOMANは開発のメインではなくあくまでも脇役ですが強力な脇役です。効率良く開発を行うためにも利用しましょう。