【必読】Gulpとは本質は視点の変換

Gulpとは

node.jsをベースとしたビルドシステムヘルパーです。ビルドシステムヘルパーとは、直訳するとビルドを手助けする人。ビルドとは、人間が書いたソースコードを実際に動くプログラムにする作業のことです。gulpとは、ビルドしたい内容をgulpに定義して自動で行うツールのことです。Gulpでは、ビルドの処理をタスクとして扱います。そして処理の内容によってプラグインをインストールしタスクを定義します。それによりいろいろな処理を自動化します。

なぜGulpが必要なのか

制作者は、制作者の視点で物事を考えます。scssを使って効率的にcssを書きたい、ファイルを分割してソースをコンポーネント化し再利用性を高めたい、TypeScriptを導入して安全性を高めたいなどを考えます。これらは、すべてビルドを行わない限りプログラムとして動作しません。手作業でビルドする場合、ひとつひとつコマンドを打ってビルドを行います。

ビルドとは、コストのかかる作業なのです。制作者の意思・視点を捨てればビルドしない方法で制作することもできます。しかしこれを自動化することでそれらのコストがなくなり、制作者の意思を制作物に反映することができます。

制作の視点とSEOの視点

WEBの場合、ファイルを分割するとインクルードするファイルが増えます。増えるとWEBサーバの処理が重くなり、サイトの表示が若干遅くなります。グーグルは、このようなサイトの評価を下げます。これは、SEO的にもマイナスです。制作者は、再利用性を高めるためにファイルを分割したのですが、SEOのためにファイルを分割せず一つにまとめる必要があります。

ほかにもグーグルは、ソースコードや画像の圧縮をサイトの制作者に要求します。制作の視点から見ればjavascriptやcssの圧縮は、メンテナンス性をなくし手間が増えるためやりたくありません。このように制作の視点とSEOの視点とでは考え方が違うため制作者は、苦労します。しかしGulpを使えばそのような問題も解決できます。このような視点の変換を自動でおこなってくれるのがGulpの本質なのです。

Gulpのインストール

node.jsのインストール

gulpは、node.jsをベースとしています。前提として、node.jsをインストールする必要があります。フロントサイドエンジニアには必須のものになるので、インストールされている方が多いと思います。

https://nodejs.org/en/

シェルやコマンドブロンプトを起動し、以下のコマンドでバージョンが表示されればインストール完了です。

npm -v

Gulpのインストール

Gulpを使用するにはグローバルとローカルにインストールする必要があります。グローバルとはPC全体でローカルとは作成するサイトやアプリのプロジェクトのことです。

・グローバルインストール
グローバルインストールはオプションgを付けます。

npm install -g gulp

ローカルインストール

プロジェクトを定義します。フォルダを作成し以下のコマンドを入力します。

npm init

以下のコマンドでGulpをインストールします。
–save-devオプションは、package.jsonのdevDependenciesに追加されます。

npm install gulp --save-dev

Gulpのバージョンを指定する場合

バージョンを指定しない場合は、gulp4がインストールされます。バージョン3をインストールしたい場合は以下のコマンドを入力しバージョンを指定してください。

npm install [email protected] --save-dev

gulpのタスクの定義の仕方は次回