gulpとは?導入の仕方とできることを解説

今回はgulpとは何か?について紹介します。

 

gulpとは

gulpとはNode.jsを使ったタスク自動化ツール、ビルドシステムヘルパーです。gulpを使うことで面倒な様々な作業を自動化することができます。

gulpの特徴としてあげられるのが、ストリーミングビルドシステムです。これはその名の通りファイルの処理をストリームでできるという点です。ストリームについては後述します。

 

タスクランナーとの違いは?

gulpと似たツールとしてGruntがあります。どちらも必要なプラグインをインストールし、タスクを効率化する目的で使われるのは同じですが、それぞれのアプローチの仕方がやや異なります。

Gruntは1タスク1プラグインというイメージで、プラグインを組み合わせることでビルドをしていくというものです。

gulpの場合、プラグインは入力されたものに対して処理を行います。gulpのタスクはGruntのビルドと似ていますね。

gulpのタスクの中でプラグインを組み合わせていくことで、タスク=ビルドを行うといったアプローチを行なっています。

プラグインの組み合わせが簡単なので、必要なプラグインを組み合わせて柔軟なタスクを作成できる他、それぞれの依存関係を減らすことができるのも長所です。

 

ストリーム処理とは?

先ほどgulpはストリーム処理を行うと説明しました。

では、ストリーム処理がどういったものなのかは実際にコードを確認してみましょう。例として.scssファイルに対して行う処理をみてみます。

gulp.task('sass', function() {
  var stream = gulp.src('sass/*.scss')
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(minify())
    .pipe(gulp.dest('css'));
  return stream;
});

 

これはsassフォルダ内にある.scss形式のフォルダに対して連続して処理を行っており、最後のgulp.dest()でファイルを書き出しています。処理はpipe()で繋げることができ、処理の間にファイルの読み書きを行わないので短時間で処理ができます。

 

処理が直感的に理解しやすい

Gruntではタスクをjson形式で記述するため、タスクが見やすい代わりに組み合わせが難しい点が目立ちます。タスクが増えていくと依存関係が複雑になり、把握が難しくなります。

しかし、gulpならストリーム処理によって連続して処理を行うことができます。タスクの連続性がわかりやすくなり、関連性も把握しやすいです。

また、タスクと処理を行う機能が分離できるので、タスクの内容をより簡潔にできます。

 

タスクを自動化するメリット

タスクを自動化すると、例えばsassやCoffeeScriptのコンパイルを行うことはもちろん、コンパイル後のファイルの結合や、ブラウザの自動更新といった作業も毎回自動で行うことができます。

要するに今まで手動でやってきたことが自動化できるわけですね。

自動化以外にも、複数人での作業がしやすいというメリットもあります。

複数人で制作すると人によってばらつきが出る可能性がありますが、そういった問題も解決してくれます。

 

また、環境によるズレが起こる事もありません。複数人で制作を行う場合、gulpを使って同じ環境を簡単に構築できるので、「複数人で作ったファイルを合わせたらズレが発生していて修正しないといけない」といった事態を回避することができます。

タスクの自動化はもちろん、環境の共有ができるというのも素晴らしいですね。

 

gulpのインストール

ではgulpをインストールする方法について解説します。

 

Node.jsをインストール

まずは以下のサイトからNode.jsをダウンロードしてインストールまで済ませてしまいましょう。基本nextをクリックし続けるだけで終了します。

Node.js

 

Node.jsをインストールするとnodeコマンドとnpmコマンドが使用できるようになります。

Node.jsが正しくインストールされているかを確認するために、node -vコマンドを実行してください。バージョンが表示されれば成功しています。

 

gulpのインストール

Node.jsのnpmコマンドを使ってgulpなどをインストールしていきます。

npmではローカルインストールとグローバルインストールの2種類があります。

  • グローバル:パソコン上のどこからでも使える
  • ローカル:そのファイル内で使える

 

グローバルにインストールしたい場合は-gオプションをつけてコマンドを実行します。

$ npm install -g パッケージ名

 

プロジェクトごとに利用する場合はローカルインストールとなります。

そのためにはまずpackage.jsonというファイルを作成する必要があり、npm init -yコマンドで作成できます。

また、パッケージを管理するためにはnpm install -Dとコマンドを打ちます。-Dというオプションは開発時に必要なものだけにつけるようにするといいでしょう。

$ npm intsall -D パッケージ名

 

package.jsonでパッケージを管理しておくことで必要な情報だけを共有することができます。

共有された側はnpm installコマンドでプロジェクトに必要なパッケージをインストールすることができるので、開発環境が違うといった事態も起きにくくなります。

 

ではpackage.jsonを作成しましょう。

以下のコマンドを入力します。

npm init -y

 

次にgulpをインストールします。

gulpはローカルとグローバルの両方にインストールする必要があります。グローバルにインストールしたgulpがローカルのgulpを動かすのに必要という感じです。

これによってプロジェクトごとにgulpのバージョンが異なっても、gulpのバージョンを合わせずに作業することができるようになります。

ではインストールしましょう。以下のコマンドを入力します。

npm install -g gulp
npm install -D gulp

 

-gはグローバル。-Dはローカルを指定するオプションです。

実行後は正しくインストールできているか確認しましょう。CLIとLocalのバージョンが表示されたら成功です。

gulp -v

 

タスクを書いてみる

まずは試しに簡単なタスクを書いてみます。gulpのタスクはgulpfile.jsというファイルに書いていきます。このファイルは自分で作成してください。

そうしたら以下のコードをファイルに記述します。

var gulp = require('gulp');
 
gulp.task('hello', function() {
  console.log('Hello gulp!');
});
 
gulp.task('default', ['hello']);

 

gulp.task()の第一引数がタスク名になります。つまり今回はhelloというタスクを作成したことになります。

helloタスクを実行するにはコマンドでgulp helloと入力します。

defaultタスクはgulpの後ろにタスク名を指定しなかった時に実行されるタスクです。

なので今回はgulpというコマンドで上記のタスクを実行できることになります。

$ gulp
[04:22:27] Using gulpfile /usr/local/work/genkou/gulp/demo/gulpfile.js
[04:22:27] Starting 'hello'...
Hello gulp!
[04:22:27] Finished 'hello' after 73 μs
[04:22:27] Starting 'default'...
[04:22:27] Finished 'default' after 4.24 μs

 

こんな感じで必要なタスクをどんどん追加していきましょう。

ちなみに、gulpfile.jsはCoffeeScriptでも記述できます。

もしCoffeeScriptを使う場合は以下のコマンドでパッケージをインストールしてから使うことができます。

npm install --save-dev coffee-script