自動化のことはじめ第12回HTML5ビギナーズ

目指せ脱初心者！現場で使われている実践スキルとは？

Tomoki Kubo株式会社まぼろし

マークアップエンジニア

ブログ: KOJIKA17

Adobe Creative Stationにて、Emmetの連載中

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

The JavaScript Task Runner

ですが！

自動化とは？

自動化とは？

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

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

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

文字の置き換えを手でやった場合

• 「目視で確認」「選択」「置き換え」

• 置き換えの数が多かったり、複雑になると、必ず漏れやミスが起きやすい

検索・置換

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

Web制作の作業

• ブラウザで更新ボタンを押す

• スマートフォンなどの実機確認

• 後方互換のための記述（ベンダープレフィックスなど）

• CSS, JSファイルをminify

• CSS, JSファイルを1ファイル結合

• メタ言語のコンパイル（Sass, CoffeeScriptなど）

• LiveReload, Browsersync

• スマートフォンなどの実機確認

• 後方互換のための記述（ベンダープレフィックスなど）

• CSS, JSファイルをminify

• CSS, JSファイルを1ファイル結合

• メタ言語のコンパイル（Sass, CoffeeScriptなど）

Web制作の作業

• LiveReload, Browsersync

• Browsersync

• 後方互換のための記述（ベンダープレフィックスなど）

• CSS, JSファイルをminify

• CSS, JSファイルを1ファイル結合

• メタ言語のコンパイル（Sass, CoffeeScriptなど）

Web制作の作業

• LiveReload, Browsersync

• Browsersync

• autoprefixer

• CSS, JSファイルをminify

• CSS, JSファイルを1ファイル結合

• メタ言語のコンパイル（Sass, CoffeeScriptなど）

Web制作の作業

• LiveReload, Browsersync

• Browsersync

• autoprefixer

• CSS, JSファイルをminify

• CSS, JSファイルを1ファイル結合

• メタ言語のコンパイル（Sass, CoffeeScriptなど）

Web制作の作業

• LiveReload, Browsersync

• Browsersync

• autoprefixer

• minifyツール

• 結合ツール（concat）

• Sass, CoffeeScript

Web制作の作業

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

The JavaScript Task Runner

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

gulp.jsを利用する手順

1. Node.js

2. package.json

3. gulpfile.js

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

PowerShell

バージョン管理ツールを使いましょう

Mac- nodebrew

Windows- nodist

gulpの詳しい使い方

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

自動化のメリット

• 複雑な作業手順の単純化

• 時間の短縮

• ヒューマンエラー・品質の向上

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

自動化して定時に帰りましょう。

ありがとうございました。