Gulpを導入してみよう(公式サイトを読みながら)

今更感もありますが恥ずかしい話、最近になってGulp(ガルプ)という自動化ツールがあることを知りました😅😅ツールの導入を備忘録も兼ねてここに掲載しておこうと思います。

Webアプリの制作に携わっていますと何度も同じ作業を繰り返すことってありますよね。例えばSASS(サス)と呼ばれるCSSをより効率的に書けるようにした言語がありまして、これはこれで慣れると便利ではあるんです..が書いたからといってそのままでウェブページのスタイルをお望みどおりに装飾出来るわけではなく、必ずコンパイルという作業を行いCSSという言語に翻訳しないとならないんです。

これまで自動化ツールがあるなんて知らない私は手作業でSASSを直してはCSSにコンパイルしてました。やってることは毎回同じコマンド実行するだけの単純作業ではあるんですけど途方もない実行回数を繰り返しています😅

そんな当たり前と思って行っていた繰り返しの手作業が自動化できる！なんて素晴らしいことでしょう🤩！ということで早速自分の開発環境に導入してみました。

Gulpに関するさまざまな記事を拝見してますと、OSがWindowsであったりMacであったりはたまたGulpのバージョンが違っていたりで導入方法がちょっとずつ異なっていたりしてました。迷ったら公式サイトに頼ろうということで公式のQuick Startドキュメントを参考にして導入してみることにしました。

Gulp公式ページ：https://gulpjs.com/

公式の手順で導入を進めると今回の記事では最終的に Gulp version: 4.0.2 の動作環境が作成できました。

Node.jsのインストール

Node.js(ノードジェイエス)はJavaScriptアプリケーションのプラットフォームのひとつです。これがないとGulpは導入できませんので最初にNode.jsをインストールします。インストールはNode.jsの公式サイトから最新版をダウンロードします。

Node.js公式ページ：https://nodejs.org/en/

導入時の安定バージョンは10.16.3でした。これをダウンロードしインストーラーに従いインストールを行いました。

node、npm、およびnpxのバージョン確認

ここで正しくインストールされたかバージョンを確認してみます。コマンドプロンプトを起動し次の１行目、４行目、７行目のコマンドを実行します。それぞれバージョン番号が返ってくれば問題ありません。

node --version
v10.16.3

npm --version
6.9.0

npx --version
6.9.0

Gulpコマンドラインユーティリティ(gulp-cli)をインストール

どうもここのインストール方法について他でGulpに関する記事を拝見しましたところグローバルインストールを行うのはお勧めではないらしいです。例えばプロジェクトによっては異なるバージョンのGulpを使わなければならない事態になった場合、グローバルインストールではプロジェクトに合った環境を個別に設定することが難しくなるそうなんです。なるほどそういった経験は確かにある！しかし公式の手順通りに進めたいし😩…やはりここは初心者なのでまずは公式手順で進めてみます。次の１行目のコマンドを実行します。

npm install --global gulp-cli

C:\Users\[ユーザー]\AppData\Roaming\npm\gulp -> C:\Users\[ユーザー]\AppData\Roaming\npm\
node_modules\gulp-cli\bin\gulp.js
+ gulp-cli@2.2.0
added 235 packages from 156 contributors in 58.523s

グローバルインストールを行うとWindowsでは C:\Users[ユーザー]\AppData\Roaming\npm配下にインストールされるようです。

ここでGulpのバージョンを確認してみます。次のコマンドを実行しますとこのようなバージョン番号が返ってきました。今はまだ Local version: Unknown です。

gulp --version
CLI version: 2.2.0
Local version: Unknown

プロジェクトフォルダを作成

プロジェクトフォルダを作成します。Webサイトのファイル一式が保存されるフォルダのことです。このディレクトリをどこに作成するのか特に指定はなかったので、私の場合は次の１、２，３行目のコマンドを実行することで C:\inetpub\wwwroot に移動し my-project という名前でフォルダを作成してその中に移りました。

cd C:\inetpub\wwwroot
npx mkdirp my-project
cd my-project

プロジェクトフォルダにpackage.jsonファイルを作成

次のコマンドを実行すると、順番に入力要求が出てきてプロジェクトフォルダにpackage.jsonが作成されます。入力要求は「package name」や「version」など聞いてきますが Enterキーで進めると必須項目にはデフォルト値がセットされます。これら項目は後から編集が可能です。-yというオプションをつけることで、入力を省略することが可能です。package.jsonファイルはプロジェクトの情報(名前、バージョン、説明、構成するパッケージなど)を管理するために使われます。

npm init -y
Wrote to c:\inetpub\wwwroot\my-project\package.json:

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

Gulpパッケージをインストール

次のコマンドを実行しGulpパッケージをインストールします。–save-dev (もしくは-D)オプションを付けることでローカルインストールを行い package.jsonの devDependencies に追記されます。ローカルインストールしたパッケージはプロジェクトフォルダ内に格納されます。

npm install --save-dev gulp

Gulpのバージョンを確認してみます。次のコマンドを実行しますとこのようなバージョン番号が返ってきました。先ほどは Unknown だった Local version にバージョン番号が確認できます。Gulp4系がインストールされていることが確認できました。

gulp --version
CLI version: 2.2.0
Local version: 4.0.2

gulpfileを作成する

gulpfile.jsは、Gulpの動きを制御するためのファイルです。package.jsonと同じディレクトリにおきます。テキストエディターを使用して次のように編集します。記述内容が何も分からなくてもとりあえず公式の通りに従ってみます。

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

Gulpのタスクを実行

プロジェクトフォルダでgulpコマンドを実行します。

c:\inetpub\wwwroot\my-project>gulp
[14:45:16] Using gulpfile c:\inetpub\wwwroot\my-project\gulpfile.js
[14:45:16] Starting 'default'...
[14:45:16] Finished 'default' after 8.36 ms

デフォルトのタスクが実行されたことが確認できました。ただ今回の gulpfile.js で定義したタスクは処理が空だったので実際は何も行われていません。

Gulpの実行環境が正常に動作することを確認できましたので次回はGulpタスクの定義を行ってSASSの自動化を試してみたいと思います😃

Gulpのタスク作成(公式サイトを読みながら)...