『gulpではじめるWeb制作ワークフロー入門』を読む

Pocket

正式タイトルは、「Webデザイナーの仕事を楽にする!」が頭に付きます。前々からプログラミングの勉強の延長で、node.jsを使ったWeb制作環境の構築に取り組んでいました。しかし、各種ツールやライブラリのアップデートが頻繁に行われていて、gulpfile.jsのコードも自分の書き方が本当に正しいのだろうか?という疑問が拭えずにいました。どこかで一度、gulpに関する制作環境構築のことを復習したいと考えていたところ本書を発見。早速、手に取ってみました。

gulpとは

様々な作業を自動化できるツールで、一般的には「タスクランナー」や「システムビルドヘルパー」と呼ばれています。gulpはその中でもnode.js環境で動作し、以前からWeb制作のシステムビルドヘルパーとしては幅広く活用されてきました。現在は「脱gulp」といった考え方も登場し、100%推奨のツールというわけではないようですが、私の場合は小・中規模の静的サイト構築を行う際の作業を自動化し、効率化を図っています。

本書の構成

Windows、Mac、どちらのユーザーでも環境構築ができるよう丁寧に解説されています。導入編の「chocolatey」の使い方などはWindowsユーザーの自分にとっては非常に役に立つ情報でした。

  • コマンドラインの使い方
  • 環境構築(Windows・Mac)
  • gulpの導入
  • gulpの実践
  • webpackの解説

大まかな構成は上記のとおりです。

gulpを何に使っているのか

CMS以外の静的サイトを構築する際に使用しています。具体的には下記のようなタスクです。

  • sassのコンパイル
  • pugのコンパイル
  • 画像の圧縮
  • 各種ファイル(HTML、CSS、JSなど)のminify
  • 確認用サーバーの起動
  • ブラウザの自動更新
  • SFTPによるアップロード

サイト内容によって多少の差異はありますが、概ね上記のタスクを設定し、ファイル更新時に各種タスクが走るようにしています。本書ではパートごとに上記のタスクを自動化するためのパッケージ導入&設定方法が解説されています。本書の解説とサンプルをベースに自分の環境用に合わせてカスタマイズすれば、オリジナルgulp環境を作れます。

gulp v4に対応

まもなく正式リリースされると言われているgulpのバージョン4に本書は対応しています。アロー関数の利用、taskやwatchの引数の仕様など、いくつかの変更が行われています。特にバージョン3のコードは動かなくなりますので注意が必要です。将来的にはこの新しい書き方が主流になるとのこと。

どんな人におすすめか

Web制作の内、コーディングを主に行っている方で、静的サイトの構築が多いという方に役に立つかもしれません。SASSなどを手動でコンパイルしていたり、ファイルを書き換える度にブラウザで手動更新を行っている人などにもおすすめしたいです。すでにgulpを使っているという方でも、ポイントポイントで役立つ情報があるかもしれません。ただ、本当に0からWeb制作を始めようと考えている人には少々ハードルが高い気もしました(プログラムが分かる方は除く)。

情報と知識の整理に活用

私の場合は前からネット情報をつぎはぎした知識を体系的に整理できたことが一番の収穫でした。既知のこともありましたが、それ以上に新たな情報やコードのサンプルを読むことで、さまざまな知見を得ることができました。ただ、本書の後半から登場するwebpackのことは、理解が追いついていないので、どこかで集中的に勉強しようと思います。

総括として、タスクの自動化や作業の効率化が大好きな方におすすめ。非プログラマーの方で、システムビルドヘルパーを利用してみたいという方に最適な1冊でした。

 

Webデザイナーの仕事を楽にする! gulpではじめるWeb制作ワークフロー入門
中村 勇希
シーアンドアール研究所 (2018-05-29)
売り上げランキング: 325,305
Pocket

Post Comment