「みんつむ Beta1: Web開発が加速する！タスクランナー『Grunt』を学ぶ」 | ツムグ http://tsumugu.link/2014/123 「タスクランナーと私」の登壇資料アップしました。 日々タスクランナーを使ったり使わなかったりする私ですが、私の最近の事例を交えた利用例や、自動化を軸としたタスクランナーとの付き合い方を中心にお話しました。 ◆スライド内の素材は以下を使用させて頂いております。ありがとうございます！ ・商用フリーで使える影絵素材サイト シルエットデザイン →　http://kage-design.com/ ・human pictogram 2.0 →　http://pictogram2.com/

1. タスクランナーと私
•日々タスクランナーを使ったり使わなかったりする私ですが、私の
最近の事例を交えた利用例や、自動化を軸としたタスクランナーと
の付き合い方を中心にお話します。
1

2. 私の登壇内容は、スライドは後ほど共
有しますので、話す内容に注力いただ
いて大丈夫です！
2

3. 自己紹介
3

4. 田中正吾（たなかせいご）
屋号：ワンフットシーバス
2004年よりフリーランス。
以後、FLASH制作を中心にインタラクティブコ
ンテンツを主に行い現在に至る。
最近は、JavaScriptやHTML5アニメーショ
ン、スマートフォン演出制作のワークフロー改
善に関わったりしていました。
4

5. スマートフォン演出や、
JavaScriptでのアニメーションなど
行っております。
5

6. あとは・・・。
6

7. デジタルサイネージ作ったり、
！
7

8. iPadアプリ作ったりしています。
8

9. さてはじめましょう
9

10. 日々タスクランナーを使ったり使わなかっ
たりする私ですが、私の最近の事例を交え
た利用例や、自動化を軸としたタスクラン
ナーとの付き合い方を中心にお話します。
10

11. ここでいう、タスクランナーはGruntとい
う前提でお話します。（もちろんいろいろ
他にもあるんですが）
11

12. 私とGrunt
12

13. タスクランナーは
使ったり使わなかったり。
13

14. なぜか？
14

15. 使うケース
15

16. 他のツールで吐き出されるソースが
都度都度、更に追記したりするケース
（何度も書き換えるの大変）
元ソース
書き加える
書き加える
書き加える 戻る
上書き
元ソース
16

17. 他のツールで吐き出されるソースが
都度都度、更に追記したりするケース
（何度も書き換えるの大変）
元ソース
書き加える
書き加える
書き加える
書き加える
書き加える
書き加える
上書き
元ソース
元ソース
書き加える
書き加える
書き加える
書き加える
書き加える
書き加える
上書き
元ソース
元ソース
書き加える
書き加える
書き加える
書き加える
書き加える
書き加える
上書き
元ソース
元ソース
書き加える
書き加える
書き加える
書き加える
書き加える
書き加える
上書き
元ソース
元ソース
書き加える
書き加える
書き加える
書き加える
書き加える
書き加える
上書き
元ソース
元ソース
書き加える
書き加える
書き加える
書き加える
書き加える
書き加える
上書き
元ソース
元ソース
書き加える
書き加える
書き加える
書き加える
書き加える
書き加える
上書き
元ソース
元ソース
書き加える
書き加える
書き加える
書き加える
書き加える
書き加える
上書き
元ソース
17

18. 複数人で作業するので
なるべく自動化して
作業フローを統一したいとき。
18

19. 以前は、
ソース＋（もしあれば）仕様書だった。
ソース見て把握して、と、なりがち。
元ソース仕様書
見て
19

20. 仕様書は初動はわかる。
ソースは現状がわかる。
しかし加えて重要なのはその間の経緯。
元ソース仕様書
見て
その間の経緯
20

21. Grunt（タスクランナー）だと
21

22. Grunt（タスクランナー）だと
自動化の内容を読み解くことでも
ソースや仕様書では感じることの出来ない
実際の作業フローを読み取ることができる。
22

23. Grunt（タスクランナー）だと
自動化の内容を読み解くことでも
ソースや仕様書では感じることの出来ない
実際の作業フローを読み取ることができる。
package.json
こんなプラグイン構成
こんなタスク名 ほか
23

24. Grunt（タスクランナー）だと
自動化の内容を読み解くことでも
ソースや仕様書では感じることの出来ない
実際の作業フローを読み取ることができる。
こんなJS結合
こんなファイル監視
など
Gruntfile.js
24

25. 使わないケース
25

26. 設定が手間がかかるので
時間が惜しい時
26

27. なぜ手間がかかるのかというと、
LessやJS圧縮だけでなく
ファイル移動や
コンテンツ応じた独自書き換えなど
イレギュラーケースが発生するから。
（通常サイト制作ならすんなり乗りやすい）
27

28. 一人で作業が完結できて
後になっても作業も思い出せる時
28

29. 一人で作業が完結できて
後になっても作業も思い出せる時
（最近は複雑化してるのでそうもいかない・・）
29

30. もう少し状況をみてみる
30

31. もう少し状況をみてみる
31

32. Gruntを利用する前に
Node.jsだけで自動化したことがある
32

33. Gruntを利用する前に
Node.jsだけで自動化したことがある
Node.js自身に
ファイル監視などの機能があるので
できることはできる。
33

34. ちょい見せ
///
34

35. Gruntを利用する前に
Node.jsだけで自動化したことがある
メインファイル
35

36. Gruntを利用する前に
Node.jsだけで自動化したことがある
設定ファイル
大量の設定・・・。
36

37. Gruntを利用する前に
Node.jsだけで自動化したことがある
実際の処理
ファイルコピー
37

38. このやり方は自分で組めばいいので
カスタマイズ性は高い。
しかし保守を考えると結構大変。
（あとで思い出せない）
38

39. Node.jsで直に組んでいると
「ファイル結合」「メタ言語の必要性」
「JSの難読化・圧縮」「保守のしやすさ」
「案件に応じたファイル整え」
といった繰り返している処理が見えてきた。
ファイル結合 JS圧縮
難読化
ファイル
整え
保守 メタ言語
39

40. 再度確認するがGruntのできること
• HTML, JS, CSSなどをminify
• ファイルの結合
• 特定のフォルダ、ファイルの複製、削除、zipに圧縮
• CSS Spriteの自動生成
• Sass(Compass), Lessメタ言語などのコンパイル
• 構文チェック
• 画像最適化
• LiveReload
• サーバーをたてる
ほかいろいろ
40

41. Gruntを始めとしたタスクランナーは
昨今のWEB制作において
やるべきことが固まってきて
それを使いやすくしてくれたものとも言える。
41

42. ありがとうございます！
※私としては自分で悩ましくなっていた
自動化フローが整理されて嬉しくもある。
42

43. デモ
43

44. 使うときの実例をひとつ
CreateJSの書き換え例
44

45. CreateJSのソースをいいかんじに
仕上げたいときに使います。
45

46. ファイル構成
CreateJSのフォルダ
node_module（Gitにはアップしない）
パッケージJSON（このGruntの設定）
Gruntfile.js タスクが書いてある場所
ベースの演出ファイル
追加で使いたいJavaScriptのファイル
ベースの演出ファイル
46

47. こんなサンプル
Grunt/createjs/sample.html
47

48. Gruntを動かすとこうなる
48

49. createjsフォルダ内を
deliverに移動して整えるタスク
49

50. JSを全部まとめて難読化(src.min.js)
50

51. 画像ファイルなど移動
51

52. sample.html必要項目に追記
CreateJS用の処理（オリジナル）処理
52

53. CreateJS用の処理（オリジナル）処理
53

54. tasks/createjs.js
54

55. わかりやすくするために、背景を赤にする変更も。
実案件でも、必ず黒背景にする
指示があったりするケースはある。
55

56. 出来上がったファイルをzip圧縮
※提出時、地味に便利
56

57. よくなったこと
57

58. package.js
58

59. Gruntfile.js
59

60. タスクを見ることで
実際の作業のフローが分かる
60

61. いままで演出を作るたびにHTMLやJS
に再度仕込んでいたことが自動化されて、
より演出を作ることに専念できるように
なった。提出時の作業し忘れもゼロに
なった。
61

62. ありがとうございます！
62

63. タスクランナーの今後＋まとめ
63

64. Gruntによって
増えた手間のまとめ方や
自動化の一つの形は提示できた
64

65. しかしながら「こうやりたい」に対して
設定する項目が多かったり
今回のようなイレギュラーなものもある
65

66. Gulpなど設定をシンプルにしたり
特定の用途に特化した
タスクランナーも出てきている
66

67. Gruntの成り立ち含めて、
タスクランナーを使うことで良くなる点を
ちゃんと理解しておく。
ファイル結合 JS圧縮
難読化
ファイル
整え
保守 メタ言語
67

68. そういう準備をしておいて、
もしより良いツールが普及したときは
いつでも試せるようにしておく。
68

69. それでは楽しいタスクランナーを
皆さんで「つむいで」いきましょう！
69

70. ご清聴ありがとうございました！
70