yeoman, grunt, bowerで静的サイト構築(第一回)

yeoman, grunt, bowerで静的サイト構築するための情報を記載していきたいと思います。

第一回はyeoman, grunt, bowerについての簡単な紹介です。

yeoman(ヨーマン)

http://yeoman.io/

node.js上で動作する様々なプロジェクトの雛形を構築できるアプリケーションです。

構築に必要な各種ファイル及びディレクトリ構成、grunt用のnode_module群のイントールなどを一括で行ってくれます。

雛形(genarator)はYeomanのサイトで検索できますので、お気に入りのgeneratorを探してみてください。

Angular.js, Ember.js, Backbone.js, Chrome Extensionsなどのプラグインを実装する場合には非常に役に立ちます。

静的サイト構築用の雛形もあります。webapp, mobileなどがそうです。

grunt(グラント)

http://gruntjs.com/

node.js上で動作するタスク管理・実行ツールです。 各種テストツールの実行やデプロイに必要な各種処理の実行など、様々なタスクを直列または並列実行することができます。

ほんの一部の紹介ですが、下記のようなことが実現できます。

  • HTML圧縮
  • JS, CSSのファイル連結・圧縮
  • ファイル削除・コピー
  • 文字列置換
  • 文字コード変換
  • jade,sassなどのコンパイル
  • styledocco, yuidocの自動生成
  • livereload

などなど紹介しきれないほどたくさんのプラグインが公開されています。

静的なサイトであれば、作業効率が上がることは間違いありません。

bower(バウワー)

http://bower.io/

JS, CSSなどの外部ライブラリ管理マネージャーです。

jQuery, Bootstrap, Angular.js, Ember.js, Backbone.jsなどのバージョン管理及びインストール/アンインストールを行うことができます。

バージョンアップも、gruntと組み合わせることで、HTMLへの反映までコマンド一発でできます。


yeoman, grunt, bowerそれぞれTwitterの公式アカウントがあるので、最新の情報が欲しい方はフォローすることをお勧めします。

次回以降、インストールから動作確認までそれぞれ記載していこうと思います。