【gulp入門】開発環境の作り方、使い方を解説！制作時間はどれくらい短縮できる？gulp 4.0への移行での変更点とは？
gulpには「急いでがつがつ食べる・ごくごく飲む」という意味があります。
gulpはAltJS・Assets・Markdownなどのファイルを素早く処理し、JavaScript・最適化されたコンテンツ・HTMLへ変換するツールです。
Fast Food（ファストフード）のドリンクをロゴにした点からも、処理速度を重視したシステムであると窺い知れます。
本記事前半ではgulpとはどのようなツールか、gulpのどのような面が工数短縮に繋がるかを説明していきましょう。
後半はインストール方法から使いやすいIDEの紹介、そして動く環境を作るところまで環境構築方法を丁寧に解説します。
gulpとは
gulp（ガルプ・gulp.js・Gulp）はプラットフォーム非依存・強力なエコシステム・記述のシンプルさを特徴とする作業自動化ツールです。
gulpはタスクランナーに分類されることがありますが、本質的にはビルドシステムに近いものになります。
Webpackが2012年・Parcelが2017年・Rollupが2018年頃にリリースされており、gulpの2013年は比較的古い部類です。
gulp設定ファイルにビルド対象ファイル・ビルド形式・ビルド結果出力先を指定しておくと、コマンド1つでビルドや変更監視を行います。
以下はgulpでできる具体的な処理の一部です。
- TypeScriptコードのコンパイル
- JavaScriptコードの圧縮
- Sassのコンパイル
- CSSの圧縮
- 画像容量の圧縮
- サムネイル画像の作成
gulpのメリット
作業効率化による恩恵については、後に項を設け詳しく解説します。
本項では他のgulpのメリットについて説明しましょう。
豊富なプラグイン・ライブラリ
gulpには長年に渡り作成・蓄積され続けた数多くのプラグインが存在します。
gulp-htmlminはHTMLの圧縮を行うプラグインです。gulp-autoprefixerはCSSに自動でベンダープレフィックスを付与します。
またgulp-notifyはnode-notifierモジュールを使用して、デスクトップ通知を行うプラグインです。
gulpプラグインを自分で作成してみても良いかもしれません。
設定ではなくコード
gulpではJavaScript形式のスクリプトを書いてタスクを定義します。設定ファイルのように定義やオプションを並べるものではありません。
慣れ親しんだJavaScriptで記載できるため学習コストが低く、コードベースのためタスク指定の自由度も高いです。
またメソッドチェーンが使用できるため、可読性の高いコードが記述できるようになっています。
人為的ミスの防止
ビルド作業はコードを修正する度に何回も実行するタスクです。
生成物に何らかの問題が発生したとき、それがコード修正によるものか人為的なミスであるかの切り分けが必要では開発に集中できません。
煩雑なビルド作業自動化の目的の1つは、人為的なミスや手順差異が発生するのを防ぐことです。
gulpのデメリット
gulpのデメリットについて説明しましょう。
プラグイン開発者への依存
古いgulpプラグインの中には更新が止まっているものもあり、ライブラリの新機能に対応していない場合があります。
どうしても使いたいプラグインがあるときは、自力で修正するか自作する必要があるでしょう。
またgulpプラグイン開発者に依存するため、ドキュメントの内容や質が一定ではありません。
場合によってはプラグインのソースコードを直接確認する必要があります。
デバッグが難しい
gulpが上手く動作しない場合、原因の切り分けにかかるコストが高いです。
ドキュメント通りに書いても動かないケースもさることながら、gulpのプラグインが未対応・要バグ修正というケースもあります。
また自身が書いた設定ファイルやスクリプトに誤りがないかも確認しなければなりません。
gulpによる作業効率化
gulpの導入は開発作業にどんな変化を与えるのでしょうか。
具体的な数字を出すことはできませんが、どのような作業がどの程度速くなるかを個々のケースごとに見ていきましょう。
作業時間の有効活用
今まで手動で行ってきた作業を自動化すると空き時間が増えます。
開発者はビルドタスクが走っている間に、調査や業務など別の作業に取り掛かることができるでしょう。
あらかじめデスクトップ通知を設定しておけば、ビルド完了を見逃す心配もありません。
開発中のコード監視・自動リロード
例えばSassを全て手動でコンパイルするとします。
開発者はファイルを編集した後、ビルドコマンドを実行するでしょう。そしてブラウザをリロードして対象の画面を確認します。
この問題を解決するのがBrowsersyncモジュールです。
ファイルを保存すると同時にビルドが開始され、終了と同時に画面がリロードされるようになります。
Sassの簡略化・自動変換
CSSのベンダープレフィックスを手動で付与するのは大変です。ブラウザの対応状況によっては、将来不要になるものも出てきます。
gulpであればプラグイン側でマルチブラウザ対応が可能です。
gulp-autoprefixerプラグインは定期的にメンテナンスが行われているため、今のところ安心して使用できるでしょう。
またPostCSSによる加工や整形・圧縮処理も可能です。
gulp 4.0での変更点
2018年1月、gulp 4.0.0がリリースされました。主だった変更点についてまとめます。
傾向として有用なgulpプラグインが公式に導入されたケースが多いようです。
直列・並列処理
gulp 3.9まではrun-sequenceプラグインにより一時的に直列・並列処理の問題を解決していました。
gulp 4.0から公式APIとして以下のメソッドが追加されています。
- seriesメソッド（タスクの直列処理）
- parallelメソッド（タスクの並列処理）
ファイル監視
gulp 3.9まではgulp-watchプラグインによるファイルの監視とタスクの実行を行っていました。
gulp 4.0からはwatchメソッドにchokidar（チョキダール）が使用されるようになり、gulp-watchプラグインは不要になります。
差分更新
gulp 3.9まではgulp-changedプラグインにより、更新対象ファイルのみをビルドするようにしていました。
gulp 4.0にはlastRunメソッドが追加され、インクリメンタルビルドが行えるようになっています。
ソースマップ
SourceMap（ソースマップ）はコンパイル前後の行数や定義の対応関係を表現したファイルです。
gulp-sourcemapsプラグインが必要でしたが、これもdestメソッドでオプション指定できるようになっています。
その他機能面での変更
エクスポートされた関数のタスク登録には、Node.jsかECMAScriptのexportが推奨されるようになりました。
またカスタムレジストリの設計が見直された結果、共通タスク・拡張機能の実装が可能です。
加えて上記のプラグインの公式API追加により、gulp本体の様々な既存機能がアップデートされました。
また公式化されたことで公式ドキュメントへの記載が行われ、より読みやすく開発しやすい状態になったようです。
gulp-cliのセットアップ
gulp-cliのインストールを行いましょう。
nodeとnpmの確認
gulpをインストールするためには、Node.jsとnpmがインストールされている必要があります。
- $ node –version
- v12.14.1
- $ npm –version
- 6.11.3
- $ npx –version
- 6.11.3
もしまだインストールされていない場合は、Node.jsの公式サイトまたはnodenvなどを見てインストールして下さい。
gulp-cliのインストール
gulp-cliをグローバルインストールします。以前にgulpをインストールしたことがある場合は、事前に削除しておきましょう。
- $ npm rm –global gulp
- $ npm install –global gulp-cli
- $ gulp –version
- CLI version: 2.2.0
- Local version: Unknown
これでgulp-cliのインストールは完了です。
gulpおすすめIDE・拡張機能
これからgulpを始めるにあたって、おすすめのIDEを紹介していきます。
もちろん通常のテキストエディタなどでも開発は可能です。
しかしタイポチェックや便利なタスク管理機能などがあるため、gulpファイルを編集する前にこれらIDEの準備をおすすめします。
Webstorm
WebstormはJetBrains製のHTML・CSS・JavaScript用IDEです。
他の言語も同時に使用する方はPhpStorm・RubyMineなどに同様の機能が内包されているので、そちらをご利用下さい。
gulpfile.jsファイル上で右クリックを押すと、コンテキストメニューが開きます。
メニュー内にはgulpのロゴと共に「Create ‘default’…」「Show Gulp Tasks」が表示される仕様です。
またオートコンプリート機能やRunタスクへの登録機能も完備されています。
Visual Studio Code
Visual Studio CodeはMicrosoft製のソースコードエディタです。
Gulp Tasksという拡張機能をインストールすると、gulpタスクをツリー表示・実行することができるようになります。
またGulp Snippets拡張機能を利用すると、よく使うコードスニペットを定型文として呼び出し可能です。
gulpプロジェクトの作成
IDEの準備も整ったので早速gulpfile.jsを作成していきましょう。
プロジェクトの作成
プロジェクトディレクトリを作成します。以下のコマンドでも構いませんし、mkdirでもコンテキストメニューからでも良いです。
- $ npx mkdirp my-project
IDEを用意した方は作成したディレクトリを開きましょう。
npm initでpackage.jsonファイルを作成します。
途中の選択肢はプロジェクトに合ったものを、お試しであればデフォルトで問題ありません。
- $ cd my-project
- $ npm init
devDependenciesオプションを指定してgulpをインストールします。
- $ npm install –save-dev gulp
- $ gulp –version
- CLI version: 2.2.0
- Local version: 4.0.2
gulpfile.jsの作成
gulpfile.jsファイルをプロジェクト直下に作成し、以下のコードをコピー＆ペーストして下さい。これは空のタスクです。
- function defaultTask(cb) {
- cb();
- }
- exports.default = defaultTask
このタスクは以下のコマンドで実行できます。
- $ gulp
- [13:51:27] Using gulpfile ~\my-project\gulpfile.js
- [13:51:27] Starting ‘default’…
- [13:51:27] Finished ‘default’ after 2.07 ms
これで最初の準備が整いました。
gulpの使い方
本記事では使い方の例として、sassのコンパイルを行います。
ビルド対象となるscssファイルを「my-project/sass/style.scss」に作成し、適当なSCSSを書いて下さい。
- p {
- color: red;
- }
次にgulp-sassをインストールします。
- $ npm install node-sass gulp-sass –save-dev
Basic Usageに従いgulpタスクを定義して下さい。
- ‘use strict’;
- let gulp = require(‘gulp’);
- let sass = require(‘gulp-sass’);
- sass.compiler = require(‘node-sass’);
- gulp.task(‘sass’, function () {
- return gulp.src(‘./sass/**/*.scss’)
- .pipe(sass().on(‘error’, sass.logError))
- .pipe(gulp.dest(‘./dest/css’));
- });
srcメソッドでビルド対象のソースコードを、destメソッドで出力先ディレクトリを指定します。
以下のようにタスク名を引数として、コマンドを呼び出しましょう。
- $ gulp sass
- [14:12:22] Using gulpfile ~\my-project\gulpfile.js
- [14:12:22] Starting ‘sass’…
- [14:12:22] Finished ‘sass’ after 41 ms
最終的なディレクトリ校正は以下になります。
- $ tree /f
- C:.
- │ gulpfile.js
- │ package-lock.json
- │ package.json
- ├─dest
- │ └─css
- │ style.css
- └─sass
- style.scss
あとは欲しい機能のプラグインやライブラリを探して、この作業を繰り返していくだけです。
おわりに
gulpはフロントエンドのタスクランナーの中でも、npm-scriptsの次に多く使われています。
勢いはwebpackに押されているものの、未だに世界的なシェアの約3分の1を誇っている老舗です。
扱えるようにしておいて損はないと思います。
また古いプロジェクトでgulp 3を使い続けているプロジェクトは、タイミングを見計らってgulp 4に移行してしまうのが良いでしょう。
