1.
自動化のことはじめ
第12回HTML5ビギナーズ
目指せ脱初心者！現場で使われている実践スキルとは？

2.
Tomoki Kubo
株式会社まぼろし
マークアップエンジニア
ブログ: KOJIKA17
Adobe Creative Stationにて、Emmetの連載中

3.
Web制作で注目されている
自動化ツール

4.
The JavaScript Task Runner

5.
ですが！

6.
自動化とは？

7.
自動化とは？
人手による作業を、機械（コンピューター）の
自動によるように変えること。

8.
反復作業が自動化に向いている
でも、なんか難しそう…

9.
身近で機械に任せてること

10.
文字の置き換えを手でやった場合
• 「目視で確認」「選択」「置き換え」
• 置き換えの数が多かったり、複雑になると、
必ず漏れやミスが起きやすい

11.
検索・置換

12.
Web制作では、
どんな作業を自動化できるか

13.
Web制作の作業
• ブラウザで更新ボタンを押す
• スマートフォンなどの実機確認
• 後方互換のための記述（ベンダープレフィックスなど）
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル（Sass, CoffeeScriptなど）

14.
• LiveReload, Browsersync
• スマートフォンなどの実機確認
• 後方互換のための記述（ベンダープレフィックスなど）
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル（Sass, CoffeeScriptなど）
Web制作の作業

15.
• LiveReload, Browsersync
• Browsersync
• 後方互換のための記述（ベンダープレフィックスなど）
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル（Sass, CoffeeScriptなど）
Web制作の作業

16.
• LiveReload, Browsersync
• Browsersync
• autoprefixer
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル（Sass, CoffeeScriptなど）
Web制作の作業

17.
• LiveReload, Browsersync
• Browsersync
• autoprefixer
• CSS, JSファイルをminify
• CSS, JSファイルを1ファイル結合
• メタ言語のコンパイル（Sass, CoffeeScriptなど）
Web制作の作業

18.
• LiveReload, Browsersync
• Browsersync
• autoprefixer
• minifyツール
• 結合ツール（concat）
• Sass, CoffeeScript
Web制作の作業

19.
たくさんのツールを
動かす方が大変

20.
The JavaScript Task Runner

21.
コマンド1つで、
好きな作業を
自動化するツール

22.
gulp.jsを利用する手順
1. Node.js
2. package.json
3. gulpfile.js

23.
ターミナル
コマンドプロンプト
PowerShell

24.
バージョン管理ツールを使いましょう
Mac
- nodebrew
Windows
- nodist

25.
gulpの詳しい使い方

26.
反復作業は
機械に任せよう

27.
自動化のメリット
• 複雑な作業手順の単純化
• 時間の短縮
• ヒューマンエラー・品質の向上

28.
Credits Image
• Photo by: cloch hands | Flickr - Photo Sharing!
https://www.flickr.com/photos/normanlowery/4694429893/in/photolist-9nSkbp-bAh7oK-5myxh7-7K8qWk-2jpkcW-89Qbsr-7mzwVH-
dRHg9G-89R8Mo-dR19JG-e7aAgt-5jRRKF-5AQ3aC-5AKLsR-4v5TD8-hZ4s3-ee7hoD-aWH2Ex-pL3MwS-pKYLFp-bnE619-76Z1LN-76V4AP-85bQJY-
e8Z6dG-5MMLHK

29.
自動化して定時に帰りましょう。
ありがとうございました。