gulp.js を今一度キチンと！gulp.js 導入基礎

このエントリーをはてなブックマークに追加

フロントエンドのお仕事として、HTMLやCSS、JavaScript のコーディング回りを行っていると、以前に比べてやらなければならないことが増えてきていました。そのため、細々した作業でも、自動化して効率よく開発をすすめないと、時間がかかってしまうことが多いです。

そんなときに活用できるのが、今回使い方を紹介する gulp です。

gulp.js

このエントリーでは、gulp が使えるように、gulp とはどういうものなのかの簡単な説明から、導入の基礎部分までを書いておきます。コピペでしか使ったことがない！という人や、誰かのコピペに頼って使っていたような人も、今後の活用していくための参考に利用してもらえたら嬉しいです。

gulp とは？

gulp.js は Node.js 製の毎回行うような作業を自動化してくれるツールです。よく様々なサイトでタスクランナーとして紹介されていますが、正確には gulp は task runner （タスクランナー） ではなくて、 The streaming build system （ストリーミング・ビルド・システム）です。違いはありますが、作業で活躍するポイントになる部分は同じです。

タスクランナーとストリーミング・ビルド・システムがどう違うかをもう少し掘り下げてみます。

Grunt と比較して

よく比較される別のツールに Grunt があります。

Grunt: The JavaScript Task Runner

Grunt のサイトにも書いてあるように、こちらは「タスクランナー」で、様々なタスクを実行させて、最終的にビルドへと進めるアプローチをするツールです。

例えば Sass ファイルを css にコンパイルして、コンパイルした後にプレフィックスをつけて、プロパティの記載の順番を並び変えるような処理を入れるような処理を入れる場合、

  • sass ファイルのコンパイルタスク
  • css にプレフィックスをつけるタスク
  • css の順番を並び替えるタスク

という３つのタスクを用意して、それぞれを順に実行してビルドを進める流れになります。

それぞれのタスクはそれぞれで完結していて、それぞれのタスクでどのファイルに処理を入れるかのファイルの指定を行う必要があります。

一方 gulp は、入力されたものに対して処理をいれていき、１つの流れの中でビルドを行うアプローチになります。

先ほどの Grunt の例を置き換えると、 css を出力するという１つのタスクの中で、１度ファイルをとってきて、そのとってきたファイルに対して、Sassのビルド > プレフィックス付与 > 並び替えという一連の処理を行う流れになります。

この gulp においてのファイルの扱いをストリームと呼ぶようなのですが、詳しくはリンク先を参照してください。

Node.js - Gruntfile.js が長すぎてつらい人は gulp を使ってみよう - Qiita

GitHub : substack/stream-handbook

gulp のインストール前に Node.js の用意

gulp を使うためには、 Node.js がインストールされている必要があります。

一番簡単なのは公式サイトからインストーラーをダウンロードしてきてインストールする方法です。しかし、 Node.js はバージョンアップが比較的多くされるので、プロジェクト毎にバージョンが切り替えられるバージョンマネージャーを使ってのインストールをおすすめしています。

インストーラーからインストール

Node.js

黒い画面が使えない・苦手という人はインストーラーから入れてください。

バージョンマネージャーを使ってインストール

nodebrew や nvm など、様々なツールがあるのですが、 Mac ユーザーであれば ndenv を、Win ユーザーであれば nodist をおすすめしています。理由はプロジェクト単位でバージョンを切り替えて利用することができるためです。

こちらを利用してのインストール方法はまた別でエントリーしようかと思いますので、今回はリンクのみ。

GitHub : riywo/ndenv

GitHub : marcelklehr/nodist

尚、ndenv のように xxenv で入れる場合は、 anyenv を使っても入れることができます。こちらは以前紹介したエントリーがあるので、そちらを参考にしてみてください。

Node.js の管理を「nodebrew」から「anyenv」に変更。 Ruby も Node.js でプロジェクトごとに使うバージョンを切り替える環境にしてみた - HAM MEDIA MEMO

Node.js が使えるようになったら、gulp をインストールましょう。

Node.js と npm

Node を使うプロジェクトでは、使う機能をインストールするために npm というコマンドを利用します。npm は node package manager のそれぞれの頭文字をとったコマンドで、 Node.js をインストールしたら npm も含まれています。

npm

様々なパッケージされたツールが、オンライン上で公開されているため、npm を使うことで、使いたいパッケージなどの管理をすることができます。

npm について詳しく知りたい人は、 npm の Documentation を参照してみてください。

npm Documentation

gulp のインストール

使いたいパッケージ、今回で言うと gulp インストールの際に、以下のコマンドをターミナルで入力することでインストールされます。

$ npm install gulp

最初の $ から右側をいれて実行します。コピペして実行で大丈夫です。

しかし、この状態ですと、他の人が同様プロジェクトに携わるときに、どのバージョンをインストールしたらよいのか別途把握する必要があり、他のパッケージをインストールするコマンドを毎回入力する手間が発生します。

プロジェクトでどのバージョンの gulp をインストールすべきかなどは、 package.json というファイルを用意することで共有が楽になります。

package.json を利用する

どのバージョンの gulp をインストールしたのかなどを package.json を用意しておくと記録しておくことができます。

この package.json は、ファイルの新規作成などで用意するのも可能ですが $ npm init のコマンドでも作ることができます。

$ npm init

プロジェクトの名前やバージョンなど、最初にいろいろと質問がでてきて、それらを答えていくことで package.json が出来上がります。何も入力しないままでもスキップして進めることもできて、その場合はディレクトリ名などが name に設定されて出来上がるようになっています。

$ npm init でできた package.json の中身

{
  "name": "project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

最低限必要な package.json の項目は？

$ npm init を使って用意した場合はオンラインで公開されることを前提としているため、様々設定する項目ごと出力されるようになっています。しかし、プロジェクトの作業状態の公開を前提としない場合、これらの設定項目は全て不要になります。最小限の項目で言うと、{} だけがあれば問題ないです。 $ npm init で用意せずとも、 package.json を作成して、 {} だけ入れておく進め方でも大丈夫です。

空っぽにした package.json

{
}

最低限 {} が１セットがないと、このあとに紹介するコマンドに影響がでる（エラーになる）のでこの {} は入れておきましょう。

ただし、 {} のみで進めてしまうと、パッケージインストールのたびに npm WARN という警告の表示がでてしまいます。これを表示しないようにするために、このプロジェクトの package.json はプライベートプロジェクトですよーという項目の設定をしておくことで表示が出ないようにすることができます。

private の項目を package.json に追加

{
  "private": true
}

これを入れておくことで、インストールのコマンドを入力しても警告がでないようになります。gulp を、実装の作業で使うだけのプロジェクトであれば、 "private": true が入っていたら気になる部分も減るはずです。

もちろん、 name や 他の説明を、削除することなくいれておくほうが良いのですが、別のプロジェクトでも同じものを利用するときに、その名前を残したままコピーしてしまう人も過去に体験したので、必ずしも必要という状況でなければ、使わない項目はいれないでおくのが良いと思います。特に、案件名とかプロジェクトキーワード的なのを残したまま他のプロジェクトで他の作業者に共有してしまったときに、公開しては良くない情報を渡してしまう可能性もあるので。

個人のプロジェクトとか作業するだけの、作成過程のコードを公開しないプロジェクトであれば、最低限の中身があれば良いと思います。

インストールパッケージを保存してインストールする

さて、 package.json の準備ができたら、gulp のインストール時に package.json にバージョンを記録しながら進めるようにします。先ほどのインストールコマンドに --save-dev のオプションをコマンドにつけるだけで、 package.json にインストールしたバージョンの情報が残ります。

$ npm install --save-dev gulp

package.json

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0"
  }
}

npm のパッケージインストールと node_modules ディレクトリ

インストールをしたディレクトリには、 node_modules というフォルダが出来上がります。このディレクトリの中に、npm でインストールされる様々な必要な機能が格納されることになります。

グローバルインストールとローカルインストール

npm を使ってパッケージをインストールする時に、先ほど書いたようにインストールを行うと、インストールコマンドをたたいた時にいるプロジェクトのディレクトリにインストールされることはお伝えしました。

しかし、 gulp の Getting Started のドキュメント などを読むと、最初に出てくるのは $ npm install --global gulp もしくは　$ npm install -g gulp だったりします。この --global や -g は npm コマンドのオプション機能で、パソコン全体で共通で使える機能としてパッケージをインストールするようになります。

グローバルインストールでのメリットは、インストールしたフォルダにパスが通っている場合は ./node_modules/.bin/gulp などと長いコマンドを叩く必要なく、 gulp と入力するだけで使えるようになることだけです。他のプロジェクトで再度インストールしなくてもよくなるというメリットもありますが、そのメリット以上に、弊害が大きかったりします。

グローバルでインストールをしてしまうデメリットは、利用したいプロジェクトだけでなくPC全体でインストールされるため、プロジェクト毎に違ったバージョンの gulp をつかっている場合に問題が起きる可能性があります。

例えば1年前にリリースしたプロジェクトで修正や変更が発生した場合に、グローバルでインストールをしてしまっているとバージョン差異が発生してしまい、エラーの原因になったり、違ったものが出力されてしまう原因になってしまいます。

グローバルでインストールをせずに各プロジェクト毎にインストールをしておけば、過去に対応していたプロジェクトに戻っても、その当時のバージョンで再度動作させることができるので、グローバルインストールにならない、ローカルインストールで使えるようにしておくほうがよいです。

gulpfile.js を新規作成

gulp のインストールが完了したら、あとは gulp のタスクを記述する、 gulpfile.js を用意することで gulp を利用することができます。

ここからは gulp の基礎の機能を、少しずつ順を追いながら、ソースコードを徐々に加えていき、確認ができるように進めます。

まずは練習用に黒い画面に、何かテキストを表示するだけのタスクを用意してみます。

黒い画面に任意のテキストを表示してみるだけのタスク

gulpfile.js を新規作成したら、中身を以下の内容にします。

gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('テスト表示です');
});

ファイルの準備ができたら、以下のコマンドを実行してみましょう

$ ./node_modules/.bin/gulp

黒い画面に、「テスト表示です」という表示が出てきたらOKです。

$ $(npm bin)/gulp
$ ./node_modules/gulp/bin/gulp.js

これらのコマンドでも同じ結果を得られます。 前者のほうの .bin の方に入っている方は、 この gulp.js へのシンボリックリンクです。

gulp コマンドまでのパスが長い

ローカルのプロジェクトディレクトリのみにインストールした場合は、./node_modules/.bin/gulp のように、 node_modules に格納されたファイルを使う必要があります。しかし、それを使うコマンドの入力は長い。

そこで、活用できるのが、 npm の scripts の設定です。以下の設定を加えておくと、 $ npm run gulp や $ npm start で gulp のコマンドが使えるようになります。

package.json に scripts を追加

{
  "private": true,
  "devDependencies": {
    "gulp": "^3.9.0"
  },
  "scripts": {
    "gulp": "gulp",
    "start": "gulp"
  }
}

npm を活用するようなこのへんの話をいろいと書くと、更に長くなってしまうので、なんでこうするのかとかの理由については以下リンク先を参照してください。なお、本文だけでなくて、コメントまで参考になることが展開されていたりします。

npm で依存もタスクも一元化する - Qiita

npm に用意した機能いろいろ書いておくのでもいいですし（その分書いたりする手間や追加削除での編集発生）、gulp とか task としておいて gulp clean のように都度使うものを入力でも、僕はどちらでもよいと思っています。個人的には案件やクライアントで使うものが変わったりする可能性もあるため、毎回その変わったのを用意するのが面倒なので、後者のほうで実行させることのほうが多いです。

タスクの登録は gulp.task()

先ほど実行したコードについてに話をもどして、コードを確認しておきます。

gulp.task() を使って、 default のタスクを書いたコードになっています。 default と書いている部分がタスクの名前で、自由にタスクの名前をつけることができます。 default にしておくと、 gulp タスク名 のコマンドにしなくても、 gulp のコマンドだけで実行されるようになります。

GitHub : gulp/API.md · gulp.task(name[, deps], fn)

ファイルをコピーするタスクにしてみる

先ほどの例では、黒い画面に特定の文字列を表示するという例にしてしまったのですが、次の例では、gulp で扱うファイルを指定して、他のディレクトリに出力する機能にしてみます。ファイルをとってきてそのまま同じものを出力するので、コピーの機能になります。

gulpfile.js に copy のタスクを用意

var gulp = require('gulp');

gulp.task('copy', function() {
  return gulp.src([
    '_resouce/**/*'
  ])
  .pipe(gulp.dest('html'));
});

先ほどの例ではタスク名を default にしていましたが、この例では copy に変更をしましたので、実行するコマンドは以下になります。

$ npm run gulp copy

もしも動作しない場合は、 npm のバージョンが低い可能性があります。npm のバージョンが2以上でなければ、npm run のうしろの第二引数が認識されないため、 npm のバージョンをあげるかしてください。

この例では、 _resouce 以下に入っているファイルをそのまま取得してきて、そのフォルダ構造のまま html ディレクトリに出力されるようになります。

ファイルの指定は gulp.src()、出力は gulp.dest()

gulp で使うファイルを指定する場合は gulp.src() を使い、出力には gulp.dest() を使います。

GitHub : gulp/API.md · gulp.src(globs[, options])

GitHub : gulp/API.md · gulp.dest(path[, options])

特定のディレクトリ以下全てのファイルとディレクトリを扱う場合は dir/**/* と アスタリスク２つとスラッシュ、その後ろにさらにアスタリスク１つをつけて指定します。

ディレクトリ以下全の取得だけでなく、特定のファイルのみだったり、特定の拡張子のみだったりなど、ファイルの種類を限定することも可能です。

var gulp = require('gulp');

gulp.task('copy', function() {
  return gulp.src([
      '_resouce/index.html',
      '!_resouce/css/*.scss',
      '_resouce/css/*.css',
      '_resouce/js/scripts.js'
    ])
    .pipe(gulp.dest('html'));
});

なお、上記の例で書いているエクスクラメーション ! が先頭に付いているものは、そのファイルは除外という指定になります。

しかし、上記の例だと、以下のようなファイルとフォルダの構成と出力結果になります。

src のオプション指定なしで実行した場合

  • _resouce
    • index.html
    • css
      • style.scss
    • js
      • scripts.js
  • html
    • index.html
    • scripts.js
    • style.css
  • gulpfile.js
  • package.json

dir/**/* ではなく、直接の指定などで指定すると、全てが同一の階層で出力されます。

階層を維持する場合、どこのディレクトリを基準にしているのか、 base のオプションを指定します。

src の base オプションを指定した場合

var gulp = require('gulp');

gulp.task('copy', function() {
  return gulp.src([
      '_resouce/index.html',
      '_resouce/js/scripts.js',
      '!_resouce/css/*.scss',
      '_resouce/css/*.css'
    ], {
      base: '_resouce'
    })
    .pipe(gulp.dest('html'));
});
  • _resouce
    • index.html
    • css
      • style.scss
    • js
      • scripts.js
  • html
    • index.html
    • css
      • style.scss
    • js
      • scripts.js
  • gulpfile.js
  • package.json

ディレクトリの中身の階層構造を維持する場合は dir/**/* にしたり、base オプションを利用してください。

処理をつなげる .pipe()

gulp.src でファイルを指定したあとに .pipe() で処理をつないでいきます。

例えばこのエントリーの最初のほうで紹介していた「Sass ファイルを css にコンパイルして、コンパイルした後にプレフィックスをつけて、プロパティの記載の順番を並び変えるような処理」 というのも sass ファイルを gulp.src で指定 → .pipe でつなぐと、とってきたファイルに対して css にコンパイル → .pipe でつなぐと コンパイルされた css ファイルが渡ってきて、プレフィックスを付ける処理 → .pipe でつなぐと css ファイルの中身にプレフィックスをつける処理がされたファイルが渡ってきて、順番を並び替える処理を入れる、という処理の流れができます。

つまり、gulp における ストリームの流れは、この .pipe によって繋げられているので、処理をつなぐために必要なものという認識でいるくらいで最初は大丈夫です。

ファイルの保存を監視する

次に、ファイルの保存を監視し、保存されたらファイルが自動でコピーされるタスクを追加してみます。

watch タスクを追加

var gulp = require('gulp');

gulp.task('copy', function() {
  return gulp.src([
    '_resouce/**/*'
  ])
  .pipe(gulp.dest('html'));
});

gulp.task('watch', function() {
  gulp.watch(['_resouce/**/*'], ['copy']);
});
$ npm run gulp watch

この例では、 _resouce 以下に入っているファイルの更新を監視して、更新があれば copy のタスクを動かすようになります。

監視の指定は gulp.watch()

gulp で使うファイルを監視する場合は gulp.watch() を使います。

GitHub : gulp/API.md · gulp.watch(glob [, opts], tasks) or gulp.watch(glob [, opts, cb])

どのファイルを監視するかの指定と、更新が入った場合にどのタスクを動かすのかの指定を行います。

監視状態になると、黒い画面で操作していた場合は watch を止めるまではターミナルの黒い画面上で gulp が動いてい状態となります。

default のタスクで copy と watch のタスクをまとめて動かす

先ほどまでのコードですと、 watch を動かしてしまうと、作業のファイルに更新をかるまでは copy のタスクが動作しないことになってしまいます。

そんなときはまとめて機能を動かせるように記述を加えます。

default タスクで copy と watch を動かす

var gulp = require('gulp');

gulp.task('copy', function() {
  return gulp.src([
    '_resouce/**/*'
  ])
  .pipe(gulp.dest('html'));
});

gulp.task('watch', function() {
  gulp.watch(['_resouce/**/*'], ['copy']);
});

gulp.task('default', ['copy', 'watch']);

default のタスク に ['copy', 'watch'] という指定を入れると、default のコマンドのみで copy と watch をまとめて動かすことができます。

基本はここまでです。あとはプラグインなどを組み合わせて gulp を構成していきます。

プラグインを利用してみる

プラグインを利用することで、 gulp でできることも幅広くなり、多くのことを自動でできるようになります。

ここでは Sass を css にする機能だけ加えてみようと思います

gulp-sass を利用してみる

gulp で Sass を利用する場合、プラグインも幾つかあって、 gulp-ruby-sass というのもありますが、ここでは gulp-sass を使って変換してみます。

gulp-sass

Github : dlmanning/gulp-sass

なんでそのプラグイン？的な説明は今回は省略します。

プラグインの使い方は、それぞれのプラグインで違うので、使うプラグインごとに確認するようにしてください。ですが、多くのプラグインは、インストールして数行記述するくらいで使えるので、最初だけ少し時間とるかもしれないですが、一度使えるようになったらあとは楽になることが多くなので、積極的に利用することをおすすめします。

gulp-sass のインストール

まずは必要なファイルをインストールします。

gulp をインストールした時同様に npm を利用してインストールします。

$ npm install --save-dev gulp-sass

gulp-sass の基本的な使い方

次に gulpfile.js にタスクを追加します。 Sass ファイルを拾ってきて、拾ってきたファイルに対してインストールした gulp-sass の機能を利用し、最後にファイルを出力します。

作業するディレクトリを先ほどの _resouce に限定し、ここに .scss を配置、そして書き出しの時は html ディレクトリに行われるようにするタスクを用意してみようと思います。

Sass を動かすタスクを追加

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

gulp.task('sass', function() {
  return gulp.src([
    '_resouce/**/*.scss'
  ])
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('html'));
});

gulp.task('copy', function() {
  return gulp.src([
    '_resouce/**/*',
    '!_resouce/**/*.scss'
  ])
  .pipe(gulp.dest('html'));
});

gulp.task('watch', function() {
  gulp.watch(['_resouce/**/*.scss'], ['sass']);
  gulp.watch([
    '_resouce/**/*',
    '!_resouce/**/*.scss'
    ], ['copy']);
});

gulp.task('default', ['copy', 'sass', 'watch']);

.scss ファイルを対象に Sass を動かすように sass のタスクを追加しています。また copy のタスクから、.scss ファイルを除外するようにしています。

  • _resouce
    • index.html
    • css
      • style.scss
    • js
      • scripts.js
  • html
    • index.html
    • css
      • style.css
    • js
      • scripts.js
  • gulpfile.js
  • package.json

これで、 _resource にいれた scss ファイルに更新が入ると、html ディレクトリにコンパイルされた css が出力されるようになります。

gulp-sass の余談

watch 中に Sass の構文エラーとかになると、 sass の変換をかけている部分で（前述のコードでは８行目）エラーが表示されるのですが sass() だけの設定にしてしまっていると watch が強制終了してしまいます。watch を終了させないために sass().on('error', sass.logError) にしておく必要があります。

なお、gulp-sass の場合は、上記の　.on('error', sass.logError) を入れておくだけで、エラー時に watch が終了するがないため、watch を終了させないためのプラグインを入れる必要がありません。

browserSync を gulp で利用してみる

もう一つ、 browserSync を gulp から利用するようにしてみます。

browserSync を利用すると、それだけで簡易的なサーバーの代わりとして利用でき、且つ、ファイルの更新時にブラウザのリロードまでしてくれる、地味に超便利なツールのひとつだと思っています。

Browsersync - Time-saving synchronised browser testing

gulp のプラグインというわけではないですが、 gulp でも扱いやすいようになっています。

BrowserSync のインストール

まずは必要なファイルをインストールします。これまで同様に npm を利用してインストールします。

$ npm install --save-dev browser-sync

BrowserSync を gulp で使う方法

BrowserSync は gulp のプラグインとして作られたものではないため、他のプラグインと記述方法が少し異なっています。

今回は watch タスクの中で BrowserSync を起動してみます。

BrowserSync を動かすタスクを追加

var gulp = require('gulp');
var sass = require('gulp-sass');
var browserSync = require('browser-sync').create();

gulp.task('sass', function() {
  return gulp.src([
    '_resouce/**/*.scss'
  ])
  .pipe(sass().on('error', sass.logError))
  .pipe(gulp.dest('html'))
  .pipe(browserSync.stream());
});

gulp.task('copy', function() {
  return gulp.src([
    '_resouce/**/*',
    '!_resouce/**/*.scss'
  ])
  .pipe(gulp.dest('html'))
  .pipe(browserSync.stream());
});

gulp.task('watch', function() {
  browserSync.init({
    server: {
      baseDir: "html"
    }
  });

  gulp.watch(['_resouce/**/*.scss'], ['sass']);
  gulp.watch([
    '_resouce/**/*',
    '!_resouce/**/*.scss'
    ], ['copy']);
});

gulp.task('default', ['copy', 'sass', 'watch']);

watch の中に browserSync.init({}) と、 sass と copy タスクの最後に browserSync.stream() を追加しています。

これで、 watch が動くと自動でサーバーが立ち上がり、 http://localhost:3000 がブラウザで表示されるようになります。

ファイルの保存でライブリロード

この状態で、 _resource ディレクトリの .html ファイルと .scss ファイルでエディタで編集して保存をすると、ブラウザの自動リロードが行われて（ライブリロード）、自動で表示も更新されます。

gulp.dest() を行ったあとでライブリロードを行う場合は、gulp.dest のあとに .stream() を利用します。

.stream() になったのは、 BrowserSync のバージョン 2.6.0 以降で、それ以前は .reload({stream: true}) と書いていました。今ではストリーム中のライブリロードが .stream() を利用するように変わっているだけです。

.reload() を使う場合

前述のとおり .src() でファイルを扱っている間のストリームの間でライブリロードを行う場合は .stream() を利用しますが、リロードを行う一つのタスクとして利用する場合は、 .reload() を利用します。

.reload の利用例

var gulp = require('gulp');
var browserSync = require('browser-sync').create();

gulp.task('js', function () {
  return gulp.src('**/*js')
  "〜省略〜";
});

gulp.task('js-watch', ['js'], browserSync.reload);

gulp.watch("**/*.js", ['js-watch']);

BrowserSync を利用すると、HTMLファイルを納品するような場合であればサーバー用意が不要になるため、準備の手間が省略できるのがとても魅力です。PHPファイルを利用する場合の連携などもありますが、それはBrowserSyncのもう少し詳しい使い方とともに、別途ご紹介しようと思います。

別案件やチームで共有するために

ここまで gulp の基礎や構成などをご紹介してきました。細々なタスクを gulpfile.js に追加していく作業、最初は手間かもしれませんが、一度構成を作ってしまえば、あとは案件にあわせて調整を加えていくくらいなので、まるっと１から作るなんてのは、ほとんどなくなると思います。

というのも、ここまで紹介してきた gulpfile.js と package.json それにソースコードのファイルを共有しておけば、あとは $ npm install だけで必要ファイルがダウンロードでき、必要タスクも実行することができるためです。

--save-dev のオプションで、 package.json には使うためのファイルが指定されていますから、別案件や・別作業者はインストール作業をするのみなのです。

最初だけは手間かもしれません、しかし、その後の楽さや他の作業者の工数削減のためにも、 gulp は活用して損はないツールだと思っています。

最後に：基礎はこの辺で

ここまで gulp の基本的な使い方と、プラグイン利用の一例と BrowserSync の組み合わせ方を見てきました。

「基礎なんてわからないまま誰かのソースコードコピペして使えたらいいよ」と言う人もいるのですが、何度か勉強会を通してわかったこととして、基礎部分をやらないままコピペで使いはじめるだけだと、いずれ使わなくなってしまうようです。修正の勘所がわからなまま使うことになり、カスタマイズができず、そのまま使わなくなってしまったという話を多くききました。普段から JavaScript を業務にしているような場合は問題なかったりするのですが、そうでない人にも gulp を活用し続けて欲しい気持ちがあり、基礎の部分を今回まとめてみました。

ある程度基礎部分を理解できていたら、あとはプラグインをいかに使っていけるかのステップになります。プラグインの利用のしかたはそのプラグインごとに違うため、それぞれ調べたりが大変になるかもしれませんが、 .pipe でつないでいる間にプラグイン処理を入れるものも多いため、凄く難しいというのは少ないはずです（中には面倒なのもありますが）。

説明しきれなかった部分もあるので、BrowserSync のもう少し詳細な使い方含め、あとは別なエントリーでご紹介していこうとおもいます。

おまけの余談：表記で正しいのは gulp ？ それとも Gulp ？

このエントリー書くまで気づいてなかったんですけど、 gulp の最初の文字は小文字の g なのか 大文字の G なのか、どっちなのか！？と、正確な解をもっていませんでした。サイトをみると、ロゴでは Gulp って大きく書いてあるじゃーんと思って大文字で表記したりしていたのですが、ちゃんとドキュメント読んでみたら、どっち使うかちゃんと書いてあった！

gulp is always lowercase. The only exception is in the gulp logo where gulp is capitalized.

引用元：GitHub : gulp/FAQ.md at master · gulpjs/gulp

ロゴの場合は大文字のだけど、ロゴ以外は lowercase だから gulp って表記するのが正しいのですね。

参照：