これから始める人のためのgulp入門

  • 公開日:
  • 更新日:
gulp

この記事の目次

gulpとは何か

Web制作において必要な処理を自動化するツールのことを「タスクランナー」と呼びます。タスクランナーを使うことによって、作業の効率化や手作業によるミスの防止になります。例えば、タスクランナーを用いると、以下のような処理が自動でおこなえるようになります。

  • SassなどのCSSメタ言語のコンパイル
  • HTML/CSS/JavaScriptの最小化
  • CSSスプライトの作成

有名なタスクランナーとしてGruntとgulpの2つがありますが、gulpには「処理の流れが分かりやすく、タスクの記述が簡単におこなえる」という大きなメリットがあります。

gulpの導入方法

手順1と2は各PCで一回実施し、手順3~7はプロジェクトごとに実施します。

手順1:Node.jsをインストールする

まずはじめに、Node.jsをインストールします。インストール方法については、Macの場合は「nodebrewでNode.jsをバージョン管理」、Windowsの場合は「nodistでNode.jsをバージョン管理」を参照してください。

Node.jsをインストールすると、同時に「npm」というツールもインストールされます。npmとは、Node Package Managerの略で、Node.jsのパッケージを管理するツールです。

手順2:gulpをグローバルインストールする

Macの場合はターミナル、Windowsの場合はコマンドプロンプトに、以下のコマンドを記述して実行します。

$ npm intall --global gulp

手順3:package.jsonファイルを作成する

プロジェクト内のパッケージを管理するために、package.jsonファイルを作成します。

$ npm init --yes

このpackage.jsonファイルを作っておけば、npm installコマンドで全く同じ開発環境を再現することができます。

手順4:gulpをローカルインストールする

gulpをプロジェクトにローカルインストールします。手順2でgulpのグローバルインストールをおこないましたが、ローカルインストールも必要です。

$ npm install --save-dev gulp

2016年3月5日追記:グローバルインストールの方法の変更について

2016年2月1日に公開されたgulpのドキュメントによると、gulpのグローバルインストールが次のように変更になったようです。

$ npm install --global gulp-cli

それ以前にgulpをグローバルインストールしていたら、上記のインストールをおこなう前に古いgulpをアンインストールしましょう。

$ npm rm --global gulp

手順5:gulpfile.jsを作成する

プロジェクトのルートディレクトリにgulpfile.jsを作成し、タスクを記述します。ここでは簡単な例として、CSSのプロパティにベンダープレフィックスを自動的に付与するタスクを作成します。

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('prefix', function () {
    return gulp.src('css/style.css')
        .pipe(autoprefixer())
        .pipe(gulp.dest('dist'));
});

上記のコードについて少し補足します。

  • gulp.task:タスク名とタスクの内容を定義します。
  • gulp.src:処理するファイルを指定します。
  • gulp.dest:処理されたファイルの出力先を指定します。
  • pipe:前の処理の出力結果を次の処理の入力として使うように機能します。

gulp.taskgulp.srcgulp.destの詳細はgulp API docsを参照してください。

手順6:パッケージをインストールする

ターミナルまたはコマンドプロンプトを使って、タスクに必要なパッケージ(gulpプラグイン)をインストールします。

$ npm install --save-dev gulp-autoprefixer

手順7:タスクを実行する

gulpfile.jsで定義したタスクを実行します。

$ gulp prefix

参考URL