Hope is a Dream. Dream is a Hope.

非公開ブログは再開しました。

Gruntで自動化が超便利なのはわかっているけど動けない人のためのまとめ資料。

こんにちわ。

ふぃふぃです。

f:id:hope_is_dream:20150115205105p:plain

Gruntとゆう開発ツール?の勉強会に行くので事前に調査してまとめてみました。

【本日開催】【再増枠!】【 ヒカ☆ラボ 】DMM.comラボで実践!Gruntを用いて、JavaScriptファイルのリリース前作業を自動化! 保守性を損なわず、ミスなく運用するノウハウをご紹介します☆ : ATND

Gruntとは?

Grunt: The JavaScript Task Runner

Gruntとは、JavaScriptで書いたタスクを実行してくれるアプリケーション(JavaScript Task Runner)です。 Webアプリケーションの開発が複雑になってきて、CoffeeScript、Sassなどのコンパイルが必要な技術を使うことが多くなってきたことや、フロントエンドのパフォーマンスチューニングのためにJavaScriptCSSファイルの最小化や画像の最適化を行うことが増えてきました。 Gruntを使うとそれらをまとめて自動化することができるようになります。「今どきのGruntを使ったフロントエンド開発(HTML/CSS編)」HTML5 Conference 2013 セッションレポート | HTML5Experts.jp

ビルドツールまとめ系の記事。 (まずは広い視野からGruntの立ち位置を知りましょう。)

ビルドツールまとめ。Gruntとかgulpとか (フロント寄り) - Qiita

Gruntはjavascriptで動くものですが、ほかにもRubyMacOS系のツールもあるようです。

Gruntの導入方法の記事。

情報は多くあるので、好みで選ぶと良さそうです。

Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門|Web Design KOJIKA17

grunt.js - Grunt入門 - Qiita

黒い画面が苦手なデザイナーでもGruntが使いたい! - Catcher in the tech

ドットインストールで学びたいならこちら。

#01 Gruntとはなにか? | Grunt入門 - プログラミングならドットインストール

Gruntのプラグインについての記事

Plugins - Grunt: The JavaScript Task Runner

Gruntにはプラグインがあり、いろいろとごにょごにょできるそうです。

Webサイト制作に便利なGruntプラグイン(その1) - Qiita

開発に必須のツール「Grunt」の便利なプラグイン | Diglog

Node.js - 僕がGrunt.jsで使っているPlugin一覧 - Qiita

### Grunt関連のスライド資料

書籍

黒い画面は怖くない ターミナルでWeb製作をパワーアップ

黒い画面は怖くない ターミナルでWeb製作をパワーアップ

Getting Started with Grunt: The JavaScript Task Runner

Getting Started with Grunt: The JavaScript Task Runner

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)

フロントエンドエンジニア養成読本 [HTML、CSS、JavaScriptの基本から現場で役立つ技術まで満載! ] (Software Design plus)