Web環境の進化に伴い、開発フローにおいてもタスクが激増しました。同じような作業を繰り返していると気づくこともあるでしょう。「繰り返しの作業を自動化することができれば、開発がもっとスムーズに進むのに…」と感じている人も多いのではないでしょうか。 そんなときは、タスクを自動化してくれるタスクランナーの導入を検討してみましょう。 今回は、開発フローにおける繰り返しの作業を自動化してくれるタスクランナー『gulp（ガルプ）』について解説します。

タスクランナー『gulp』とは？

gulpはcssやjavascriptファイルの圧縮や結合、Scssのコンパイルなどを自動化してくれるタスクランナー。開発フロー上で繰り返していた作業を自動化することができます。 例えば、

• cssにプレフィックスをつける
• cssのプロパティを並べかえる
• Scssをコンパイルする
• 画像、css、javascriptを圧縮する
• PC、スマホ、タブレットの実機確認をする
• javascriptのコーディングスタイルをチェックする

などの作業。 これらはファイルの変更時や納品ファイルを作成する際に、毎回必要となる作業です。gulpを使えば、こういった作業を自動化できるため、意識することなく済ませることができます。 また、gulpでプロジェクトファイルを作成しておけば、自動化のプロセスを他の人と共有することも可能。チームでの開発にも力を発揮してくれるツールなのです。

gulpの特徴とは？

タスクランナーと聞くとgulpよりも先にリリースされたGruntを思い浮かべる人もいるのではないでしょうか。 Gruntは、単一のタスク（プラグイン）を実行させるのが主な役割。単一のタスクをうまく組み合わせて実行することで、大きな目標であるビルドに辿り着くというアプローチです。 gulpは、タスクの中でいろいろなプラグインを組み合わせ、タスク＝ビルドを行うアプローチが採用されているのが特徴です。プラグインはあくまでも入力に対して処理を行うためのもので、gulpにおけるタスクはGruntのビルドに近いといえるでしょう。 また、プラグインを容易に組み合わせられる点もgulpの特徴のひとつ。柔軟なタスクが作成できるだけでなく、タスク同士の依存関係を減らすことにもつながります。 さらに、GruntがJSON形式による独特な記述を用いるのに対し、gulpはjavascriptで記述できます。また、Gruntは基本的に同期処理されるため、タスクはひとつずつ実行されるのに対し、gulpは基本的に非同期処理のため、タスクが高速に処理できる特徴もあります。

gulpを使うメリットとは？

gulpを使うメリットは大きく3つあります。

• 余計な作業に気を使う必要がなくなるため、開発そのものに集中できる
• ヒューマンエラーを減らし、時間を短縮できる
• 開発者の環境によって納品ファイルが変わることがない

前述のような繰り返し作業を自動化することで、余計な作業に気を使う必要がなくなり、結果として、開発そのものに集中できます。 Sassなどのcssプリプロセッサを使用している場合、毎回コンパイルの作業が必要です。例えば、コンパイルした後に「圧縮・結合し、さらにブラウザの自動更新も行いたい」と思った場合、これらの作業をgulpのタスクにし自動化することで、作業を効率的に進めることができます。 また、少しの修正にも関わらず多大なフローをこなさないといけないケースや、Sassは自動生成できるが、その他は作業ごとにコマンドを入力する必要があるといったケースでは、作業が煩雑になりがち。結果的に、「タブレットの動作確認漏れ」や「画像の圧縮忘れ」などのヒューマンエラーにつながってしまいます。 gulpなら、自らファイルの変更を検知し自動で作業してくれるため、ヒューマンエラー発生のリスクを減らすことができます。 さらに、gulpにおける処理の設定ファイルをチームで共有しておけば、開発メンバー全員が同じタスクを行えます。cssプリプロセッサのコンパイルや圧縮の方法など、人によって成果物がバラバラになることもなくなり、結果として成果物の質を一定に保つことができます。

gulp導入にあたっての注意点

作業を自動化し、開発を効率化してくれるgulpですが、導入にあたっては意識しておくべきポイントもあります。 gulpを使用するためにはgulpとnode.jsを導入しなければなりません。導入そのものはそれほど難しくないものの、使用する前に導入が必要な点は押さえておきましょう。 また、gulpを使うためにはタスク処理を記述する必要があります。gulpはnode.jsで動いており、設定項目はgulpfile.jsというファイルにjavascriptで記述しなければなりません。そのため、多少のjavascriptの知識は身につけておく必要があります。 あと、gulpは仕様が変更されることがあります。将来的に削除される可能性が高いものなら、どこかのタイミングで仕様変更に対応しなければなりません。 こういった点も考慮しながら、gulp導入メリットについて考えてみましょう。

作業の効率化に向けてgulp導入の検討を

もし、現在の開発において不便を感じることがないなら、無理にツールを導入する必要はありません。また、gulpを導入する場合でも、そのすべての機能を理解する必要もありません。あくまで作業を自動化し開発を楽にするためのツール。自分の作業が楽になる機能だけに絞って活用するのもポイントです。 繰り返し作業に時間を奪われたり、煩雑な作業によってヒューマンエラーが起こったりしがちな人は、gulp導入による作業の効率化を検討してみましょう。