gulpで自動化できるWebコーディング作業を先に知っておく

gulp 画像1

Web制作の現場では、技術の存在を知らないことで非効率な作業を続けてしまうことが少なくない。ただ、新しい技術を習得するのは時間もかかるので、習得コストとメリットを天秤にかけることだろう。

僕が習得して良かったと感じている技術の1つに「gulp.jp（ガルプ）」という自動化ツールがある。

ここでは、Webデザイナー目線でこのgulpの概要とメリットを伝えたい。「そういうことに使えるなら覚えておいた方がいいか」と重い腰をあげてほしい。

gulp.js

gulpの概要

gulpは、作業の自動化と強化を行うツール。例えば、コードの結合・コードのMinify・スプライト画像の作成・画像の圧縮など、面倒だけどやったほうがいい作業を自動化できる。Node.jsで動くので、事前にNode.jsをMac/PCへインストールしておく必要がある。

使う際には、制作するプロジェクトのディレクトリに npm でgulp本体とプラグインをインストールし、自動化処理を gulpfile.js に記述、コマンドラインでgulpを実行するという流れが一般的。

（制作するディレクトリ）
.
├── dist ←（自動処理後に出力される場所）
│   ├── index.html
│   ├── css
│   ├── js
│   └── img
│
├── src ←（自動処理前のものを入れる場所）
├── node_modules ←（gulpやプラグインが入っている）
├── package.json ←（gulpやプラグインを管理している）
└── gulpfile.js ←（gulpにやってもらうことを書いている）

gulpのメリット

gulpのメリットは、豊富なプラグインを組み合わせて拡張性の高い自動化処理が行えることにある。ストリームで処理されるので、gulp実行中に他の作業がブロックされない点もありがたい。

僕がよく使っている処理をプラグインとセットでリストアップしてみる。

コードを結合できる

プラグイン gulp-concat などを使いCSSやJSを1ファイルに結合できる。HTTP/2が使えないサイトからは同時に6ファイルまでしかリクエストできないという制約があるため、ファイル結合はサイトによっては効果的。

古いサイトの改修を頼まれた場合に、追加CSSを別ファイルとして書いておき、結合を自動化する。何千行もある古いCSSの下にコピペする必要が無くなる。

コードを圧縮できる

プラグイン gulp-clean-css gulp-uglify などを使いCSSやJSを圧縮できる。圧縮は行数の多いデータほど効果的で、新旧入り混じった大量のコードを圧縮すると2/3程度に抑えられたりする。

レガシーブラウザ対応ができる

プラグイン gulp-autoprefixer babel などを使い古いブラウザへの対応を自動化できる。

Autoprefixerは、その名の通りプレフィックスを自動で付与するもの。-ms- -webkit- -moz- などと追加で書くCSSを自動で書き込んでくれる。Babelは次世代ブラウザ用の便利で簡潔なJavaScript（ES2015）を古いブラウザでも動くように変換してくれるコンパイラー。

アイコンフォントが作成できる

プラグイン gulp-iconfont gulp-consolidate などを使い、FontAwesemeのようなアイコンフォントを自作できる。作る側としては、Illustratorで個別のSVGファイルを作成して設定した環境に放り込むだけ。

スプライト画像が作成できる（SVG推奨）

プラグイン gulp-svgstore でインラインのSVGスプライトを、gulp-svg-spritesheet でCSSスプライト画像としてのSVGを作成できる。

ビットマップのCSSスプライト画像は gulp.spritesmith で作成できるが、デバイスの高解像度化やHTTP/2の登場によって有用性が減ったため、今から取り組むならSVGスプライトの自動化だろう。

画像の圧縮ができる

プラグイン gulp-imagemin などで画像の圧縮ができる。前の記事で書いたImageOptimやTinyPNGを使った圧縮とほぼ同じことが実行可能。同じ圧縮エンコーダーが使えるので当然ではある。

ブラウザでライブリロードできる

プラグイン browser-sync などでブラウザテスト中にライブリロードができる。CSSを更新してリロードという作業が無くなる。ローカルでルートディレクトリを使ったテストができるのも便利。

メタ言語の変換ができる

HTMLのテンプレートエンジン「Pug」・CSSのプリプロセッサである「SCSS」・AltJSの「TypeScript」などは、そのままではブラウザで表示できない。それぞれ、通常のHTML・CSS・JSに変換（コンパイル）する必要があるのだけど、そういった作業もgulpで自動化できる。

gulpを部分的に導入

僕の場合は「メタ言語の変換」で使ったのがスタートで、使っているうちに機能を増やしていった。ボトルネックになっている作業からgulpで自動化して慣れるのがいいかと。

ちなみに、gulpを使い始めるときにGUIアプリを探したけれど見つからなかった。決まったコマンドしか打たないし、gulpfile.js もプロジェクト開始時に1回書けばいいだけなのでニーズは少ないのだろう。

「どうしてもGUIで」または「gulpがうまく動かない」場合は、Preprosというアプリケーションを使う選択肢もある。いずれにせよ、自動化のメリットは大きいので手を出すことをオススメしたい。