WCAN 2013 Winterでのライトニングトーク「自動化ツール『Grunt.js』について」の発表スライドです。

1. 自動化ツール
「grunt.js」
について
Seiko Kuchida : WebbingStudio
2013.12.21（Sat） @ 名古屋国際会議場

2. 口田 聖子（うぇびん）
Webエンジニア
CMSアドバイザー
http://webbingstudio.com/

3. 札幌から
来ました！
Nagoya
Sapporo

4. 名古屋
Web
デビュー

5. お手柔らかに…
((((( д ;;)))

6. Grunt.js
ぐらんと じぇいえす

7. Grunt.jsとは

8. Web制作の
作業をまとめて
自動化する

9. どんどん増える
細かい作業

10. ちょっとまえ
HTML
CSS
JavaScript

11. いま
HTML
CSS
Git
JavaScript
PHP

12. これから
HTML
JavaScript
CSS
Git
PHP
ファイル圧縮
Sass

13. 黒い画面 黒い画面 黒い画
面 黒い画面 黒い画面 黒い
画面 黒い画面 黒い画面 黒
い画面 黒い画面 黒い画面
黒い画面 黒い画面 黒い画
面 黒い画面 黒い画面 黒い

14. やってられん

15. Grunt.jsが
おまとめします

16. Grunt.jsが
できること

17. たとえば

18. 黒い画面で 起動すると

19. SassやJavaScriptを
更新するたびに

20. 自動でCSSを書き出し

21. JavaScriptを圧縮し

22. ブラウザをリロードして
スタイル一覧を作る

23. あれこれ自動化！
CSS・JavaScriptの結合
Sass・Compassの監視
画像のサイズ軽量化
文法チェック
ブラウザの画面を更新

24. Grunt.js
のしくみ

25. Grunt.js
JavaScriptの一種です

26. Node.jsが必要です
+
Node
Grunt

27. Node.jsって？
普通のJSではできなかった
処理が可能になりますが…

28. Node.jsは
知らなくてもOK

29. 重要なふたつのファイル
packege.json
Gruntfile.js
= 監督
= 演出家

30. JavaScript圧縮と
Sassを使おう！
packege.json

31. .scssファイルが
更新されたら
Sassで書き出し！
Gruntfile.js

32. やることを決めたら
黒い画面で起動

33. grunt

34. Grunt.js
の難点

35. Gruntfile.js
自分で
作る必要がある

36. Gruntfile.jsは
書き方が難しい…

37. おしえて
えらいひと！

38. grunt.js 使い方

39. コーダーさんの為のGrunt入門
http://blog.mach3.jp/2013/03/21/gruntjs.html

40. Web制作で面倒な作業を自動化する
ビルドツール、Grunt v0.4 入門
http://kojika17.com/2013/03/grunt.js-memo.html

41. Grunt Plugins Advent Calendar 2013
http://qiita.com/advent-calendar/2013/grunt-plugins

42. 参考サイトを
フォローメールで
ご紹介します
Twitterもどうぞ
@webbingstudio

43. ありがとうございました
http://webbingstudio.com/

44. 参考サイト一覧
Grunt: The JavaScript Task Runner
http://gruntjs.com/
Web制作で面倒な作業を自動化するビルドツール、Grunt v0.4 入門｜Web Design KOJIKA17
http://kojika17.com/2013/03/grunt.js-memo.html
!
コーダーさんの為のGrunt入門（前編）∼導入編 ‒ Mach3.laBlog
http://blog.mach3.jp/2013/03/21/gruntjs.html
Grunt Plugins Advent Calendar 2013 - Qiita [キータ]
http://qiita.com/advent-calendar/2013/grunt-plugins
!
grunt.js0.4.0でJSとCompassをコンパイルする - 車輪を再発明 / koba04の日記
http://d.hatena.ne.jp/koba04/20130203/1359898395
!
gruntを使ってCSS/JS周りを自動化するのが、なうでペヤングらしいので使ってみた - 鳥さんの独り言
http://d.hatena.ne.jp/diveintounlimit/20120909/1347186023
!
Gruntを使って画像を最適化 ¦ mn-memo
http://mn-memo.com/archives/1059