はじめに

　本稿ではWEB制作における様々な「タスク」を自動化してくれる Gulpガルプ について解説します。 本稿では「Gulpが必要とされる背景」を重点的に説明し、それからGulpの概要について解説します。

近年のWEB制作方法の変化について

　このページをご覧になっている方は、WEBサイトが HTML, CSS, JavaScript などのマークアップ言語やプログラミング言語で作られていることはご存知でしょう。 以前(1990年代〜2000年代)のWEBサイトは、人がコーディングしたHTMLやCSSをそのままサーバーにアップロードしてWEBサイトを構築していました。 しかし近年のWEB制作現場では、人が書いた HTML, CSS, JavaScript をそのままサーバーにアップロードして動かすということが減ってきています。 それは一体どういうことでしょうか？

Minify

　一つの大きな変化として「WEBページが速く表示されるのは良いことだ」ということが、以前よりもさらに強く求められるようになったことがあります。 たとえば Google は PageSpeed Insights というWEBサービスを提供し、WEBページの表示スピードをスコアリングするなどして、WEB開発者に少しでも速く表示されるWEBページを作るように促しています。 このような「高速なWEBページをつくる」ためのテクニックの一つとして Minify があります。
　Minify とは、人が書いたソースコードを可能な限り縮小することを言います。 ソースコードから改行やスペースを取り除いたり、変数名を一文字に変換するなどして、人が書いたソースコードをできる限り短くして、JavaScript や CSS のファイルサイズを小さくするような工夫が行われています。 Minify は人の手で行うのではなく、Minify 専用のツールを行います。

AltJS, CSSプリプロセッサ の利用

　また、もう一つの大きな変化として、JavaScript や CSS を別のプログラミング言語から変換して作る手法が登場したことがあります。 JavaScript の代替となる TypeScript, Coffee Script などのAltJS言語でフロントエンドのプログラムを作成し、それを JavaScript に変換(トランスパイル)して JavaScript ファイルを生成する手法が登場しました。 また CSS についても SASS, LESS などでCSSプリプロセッサ言語でコーディングし、最終的に CSS ファイルを出力するようなことも普通になってきました。

ファイル結合

　またプロジェクトにおいて JavaScript や CSS などのソースコードが肥大化してきた場合、ページや機能などの単位でファイルを分割して開発を行いたくなります。 しかしWEBサイトで実際に動かす場合にはファイルが分割されている必要はないため、サーバーで動かす時には管理のために分割していたファイルを結合して動作させることも多くなりました。

　以上のように、近年のWEB制作方法は「人が作り出した制作物に一手間かける」ように変化しています。

Gulp はタスクの自動化の仕組みを提供する

　そんなWEB制作の開発中のことを考えて見ましょう。 制作途中においては「プログラムを一行だけ追加してブラウザで確認する」ようなシーンが頻繁にあります。 しかし、プログラムを一行変更する度に上記のような「一手間」を人手で行うのは、まさに「手間」です。 そこで、それらの作業を自動化する仕組みを提供してくれるのが、本稿のテーマである「Gulpガルプ」というわけです。 Gulp では、WEB制作の中で行う作業のことを「タスク」と呼んでいます。

　Gulp では「どのファイルを」「どのように加工して」「どのように出力するか」を一つの「タスク」とし、そのタスクを gulpfile.js という名前のファイルに JavaScript で表現します。 例えば「CSS を Minify する」タスクの例は次のようになります。 (雰囲気を掴んでもらうためにコードを提示しています、中身を理解する必要はありません)

gulp.task("minify-css", function() {
    gulp.src('src/*.css')
        .pipe(cleanCSS())
        .pipe(gulp.dest('dest/'));
});

　このように、WEB制作においてすべきことを「タスク」として JavaScript でコード化しておき、あとは必要な時にタスクを呼び出せば良いというわけです。 宣言したタスクは、次のような1つのコマンドで実行することができます。 (この例の場合「minify-css」という名前のタスクを呼び出しています)

$ npx gulp minify-css

　また Gulp にはファイルの監視機能 (Watch) があり、ファイルが変更されるたびに自動的にタスクを実行する仕組みがあります。 これにより、ファイルを変更するたびに上のようなコマンドを実行する必要が無くなります。 この監視機能により、プログラマはコーディングに集中でき、Minify などの実行を気にする必要がなくなります。

おわりに

　本稿では Gulp が必要とされる背景と、Gulp の概要について解説しました。 皆様のWEB制作の助けになれば幸いです。

Gulpのトップへ戻る