Subscribed unsubscribe Subscribe Subscribe

CHROMA

Web Designer の頭から飛び出たアイデアの記録

"今どきのGruntを使ったフロントエンド開発(HTML/CSS編)"セッションのメモ

Dev

最初に

HTML5 CONFERENCE 2013 に行ってきて、"今どきのGruntを使ったフロントエンド開発(HTML/CSS編)" という 石本 光司 さんのセッションを聴いてきたのでそのメモを残しておこう。 当日のセッションは ここ( ルーム1A - HTML5 カンファレンス 2013 - YouTube ) で観れます。 当日使われたスライドと発表内容は 今どきのGruntを使ったフロントエンド開発(HTML/CSS編) に公開されています。

今どきのGruntを使ったフロントエンド開発(HTML/CSS編)

Web アプリケーションの開発が複雑になってきており、それを改善するために所謂 "黒い画面" を使うようになってきた。

Grunt を使わなくても GUI ( Koala など) を使えば済む話ではある。
たが、各アプリケーションを GUI で導入すると、アプリケーションに慣れるまでの時間や、マネーというコストがそれぞれにかかってくる。それならここらでいっちょ黒い画面とやらを触ってみようぜーってことで Grunt 使いましょう。

Grunt を使う

Install

node.js をインストール ( npm も同時にインストール) したあと、

$ npm install grunt-cli -g

Grunt を動かしているファイル

以下の二種類のファイルで Grunt は動いている。

  • package.json ( パッケージ管理 )
  • Gruntfile.js ( 処理内容を記載 )

..大分聞きそびれた

この時聞きそびれた内容が多い..
公式サイト みて確認したほうが良い。

Grunt をカズタマイズする

まずは以下のリンクからプラグインをみて、拾って使ってみるといいかも

同じようなプラグインがあった時は、 grunt-contrib-{strict} を使った方がいい。公式でサポートされているものだから。

スタイルガイドは何故作るのか

デザイナーとモジュールの共有し、フロントエンドではこういうふうにスタイルを組んでいるんだよ. っていうのを両者で共有することが重要なため。

本筋とは関係ないが、Sass 等のメタ言語は作業の効率化などを促進してくれるが、 CSS がもつ根本的な問題(メンテナンスブルな設計など)を解決してくれるツールではない。

Grunt は何を解決してくれるか

CSS や画像の圧縮、コードの文法チェック、SCSS のコンパイルなどを管理する。
制作を行うのは人間なので、いくら人の意見や経験でベタープラクティスがわかっていても、「めんどくさい」や「わすれてた」でベタープラクティスがとれていないことがある。これを解決するために、製作作業の中でベタープラクティスを気づかせてくれる・自動で行ってくれるのが Grunt 。

Grunt を最速で使うために ( YEOMAN )

Grunt を最速で使うためには、YEOMAN をインストールする。 Grunt, BOWER を内包している。

その他メモ

最後に

Grunt は Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門 という記事が出た時に知った時から存在は知ってたけど、導入できてない.. 。

これを機に導入したい!