Sassサスを使ったCSS記述の効率化や画像の圧縮、JavaScriptファイルの縮小、リアルタイムプレビュー等、ウェブサイト制作の技術は多岐に渡ります。近年では煩雑な処理を自動化する「タスクランナー」というツールが注目されています。簡潔で高速な処理が魅力のタスクランナーGulpガルプを通して、簡単なタスクを設定して実行するまでを解説します。導入は簡単で、本記事の手順であれば無料で5分程度でセットアップできます。ビデオでも解説しているので、安心してインストールできるでしょう。

作業を自動化できるタスクランナーとは?

ウェブ制作における様々な処理を「タスク」という単位で扱い、このタスクを自動化するツールのことを「タスクランナー」と呼びます。Gruntグラントが有名でしたが、2014年頃からGulpも注目されています。一般的にウェブ制作の現場では、Sassサスを編集すればコンパイルを実行し、画像を編集すれば画像を圧縮するというように多くの手間がかかります。タスクランナーを使うとこのようなウェブ制作での煩雑な処理が全て自動で行われるため、開発の工数の短縮につながります。また、一度定義したタスクやインストールしたプラグインを開発者間で共有でき、チーム内で一定の品質を保った開発ができるようになります。

タスクランナーのメリット

Gulpのメリットは簡易な記述と高速な処理

GruntもGulpも、Node.jsノード・ジェイエスをベースに作られたタスクランナーです。どちらが優れているというわけではありませんが、GulpはGruntに比べていくつか使いやすい点があります。例えば、GruntではJSONジェイソン形式で独特の記述方法であるのに対し、Gulpは普段使っているJavaScriptで記述可能です。また、Gruntでは基本的に同期処理である(※1)為タスクは一つずつ実行されますが、Gulpでは基本的に非同期処理なのでタスクが高速に処理できます(※2)。

gulp(ガルプ)のメリット

※1 Gruntでも特殊な記述をすることで非同期処理を実行することは可能です。
※2 プラグインの性質や処理方法によっては非同期処理でも遅くなる場合があります。

次のページではGulpの導入方法を解説します。所要時間5分でできる内容です。