tipsBeartipsBearwebデザイン等のweb制作メモRSSContactAboutGruntを使ってプロジェクトを自動化する、MyタスクメモPublided2014.03.12Codinggrunt,Node.js,toolGruntで出来ることはたくさんありますが、今回ご紹介するのは私がよく使うGruntの設定のメモになります。ちなみに、Gruntの導入方法や基本的な解説は下記の記事がとてもわかりやすく紹介してくれていますので、これから導入したいという方がいましたら是非参考にどうぞ。WATCHまた、この記事はSass/Compass、ブラウザのliveReloadを使用することを前提に書いていますので、実践する場合はnode.js以外にも各種必要なプラグイン等をインストールしておいてください。文法ミスをリアルタイムで指摘jsの圧縮liveReload(ファイルが更新されたらブラウザを自動でリロード)よく使うやつをざっと挙げてみました。※ベンダープレフィックスは現時点ではCompassの機能使うよりAutoprefixerにやらせたほうが管理が楽なので、こちらを使用しています。CSSスプライトのみ、Compassのマジックインポートを使用します。複数使用する時とか楽なので...サイトのフォルダ構成一例こんな感じでリリースを想定したフォルダ分けしておくと管理がとっても楽になります。私の場合、上記のように2つフォルダを分け、[_src](作業用のフォルダ)と、作業用フォルダから各データを圧縮した、[dist](確認・本番用のフォルダ)と分けています。全ての作業が完了し確認も終わったら、[dist]からゴミを削除して本番にアップする納品フォルダになるようにしています。することでアップロード時のミスを防ぐことができたり管理がしやすくなるので、やりやすいやり方で分けておくと良いと思います。ディレクトリ構造は好みや決まりごとがあるかと思いますので、好きなように変更してください。Plugins使用するプラグインは以下になります。grunt-autoprefixerベンタープレフィックスの自動付与grunt-contrib-copyファイルのコピーgrunt-contrib-cleanファイルの削除grunt-contrib-concatcss,jsの結合grunt-contrib-compassgruntでSass/compassを扱うgrunt-contrib-connectファイルの監視用ローカルサーバーを立ち上げるgrunt-contrib-watchliveReloadgrunt-contrib-jshintjsの文法ミス指摘grunt-contrib-uglifyjsの圧縮grunt-cssocssの圧縮grunt-csscombcssのプロパティをソートgruntfile.coffeegruntfile.coffeeを新規作成して、以下のコードを書きます。returnこんな感じ。毎回全部のタスクを実行させるのではなく、grunt.registerTaskに用途ごとのタスクを記述しておいて、必要な時に必要なタスクを走らせるようにすると便利です。上記のgrunt.registerTaskは、図のようなタスク管理をしていますなお、.jsのライセンス問題(minifyするとコメントアウトは消えてしまう)については、前川さんのセッションを参考に、ライセンスだけ切り取ったjsファイルを結合・圧縮したあと最後にその上から貼り付けるというやり方を採用させて頂いています。ここ悩ましいですねー...。config.rb必要最低限しか入れていませんがこちらも好みで適宜変更してください。false余談すごく今更になってしまいましたが、以上がGruntの備忘録でした。去年辺りからずっとGrunt便利だよ使ってみなよと言われていたものの、Compassがやりたいことを大体やってくれていたので、導入するメリットをあまり感じていなかったのですが(黒い画面こわい、jsよくわかんないやつ使うしこわい・などなど要はめんどくさかった)、使ってみると、Win⇔Mac両方使う私にとってとても便利なビルドツールでした。思うのは、node.jsさえあればどの環境でもコマンド一発で設定を共有できるというのは魅力的だなということ。当たり前だろと突っ込まれそうですが、使ってみてはじめて有り難みがよく分かりました。install一発で環境構築できちゃいます。Gruntが一番力を発揮するのは大人数プロジェクトなんじゃないかなと思いますが、個人の環境でも自分の好みの設定を作っておけば次からサイト作る時も楽ちんでいい感じです。今でも黒い画面はあんまり好きではないですが...こればっかりは慣れるしかないですね...。上記のGruntの設定は自分用メモなので、そのうち他のタスクも追加されるかもしれません。スマートにしたいところ。