Gulp導入手順書とファーストインプレッション

この文書作成時のソフトウェアバージョンは以下です。

• Windows 10 Home バージョン1709
• Chocolatey v0.10.8
• Node.js v10.0.0
• npm 5.6.0
• Gulp.js CLI version 3.9.1

> Gulp is 何Gulp is 何

GulpはNode.jsのモジュールとして提供されるタスクランナー。だと思う。MavenとかGradleのWebフロントで使われる版。
GRUNTっていうタスクランナーが居たんだけど、不満があったので解消のために作られたのがGulp。
似たようなやつにGRUNTとかBroccoliとかがいる。
流れの早いWebフロントにおいて、この手のタスクランナーへの依存は負の遺産になるから依存を減らしてnpmでシェルスクリプトをごりごり書こうという向きもあるようだ。

> 導入手順書導入手順書

> Node.jsのインストールNode.jsのインストール

Windows環境ではChocolateyを使うのがお手軽。

PowerShell

> cinst nodejs.install

インストール確認は以下

PowerShell

> node -v

> GulpのインストールGulpのインストール

ここからnpmを使う。npmはNode.jsのパッケージマネージャでNode.jsに含まれている。
グローバル環境にGulpをインストールする方法もあるようだが、ローカルとグローバルで多重管理するのは嫌な予感しかしないのでローカルにのみインストールする。
まずは対象プロジェクトのルートディレクトリをnpm管理下に置く。

PowerShell

> npm init

初期情報は適当に入力する。
package.jsonやらnode_modulesディレクトリやらができる。VCS管理下に置いている場合はnode_modulesディレクトリは管理対象外にしておく。

次にGulpをインストールする

PowerShell

> npm install gulp --save-dev

package.jsonのdevDependenciesにGulpのバージョン情報が記載される。
グローバルにはGulpをインストールしないので、このままではgulpコマンドは使えない。
ので、npmコマンドから実行できるようにする。
package.jsonのscriptsに以下を書き加える。

package.json

{
    ...
    "scripts": {
        "gulp": "gulp"
    },
    ...
}

以上で> npm run gulp タスク名コマンドでタスクを走らせられる。コマンド長ぇな。

> タスクを書くタスクを書く

ルート直下におもむろにgulpfile.jsを新規作成する。

gulpfile.js

var gulp = require('gulp');

gulp.task('hello', function() {
    console.log('Hello Gulp!!');
});

これで> npm run gulp helloするとfunctionの中身が実行される。

> 所感所感

ファイルのコピーとかjsonのマージとかやってみたけど、まあ、ビルドスクリプトって感じ。
まだ使っていないけど、ファイルを監視するwatchとか使い始めたら本番じゃないだろうか？
jsで書ける点とタスク間の依存関係を少なくできそうな雰囲気があるのは良い感じ。でもやっぱり使い倒してみないと本領や欠点はわからないね。