Glupについて

はじめに

近年はWEBサイト制作作業において「タスクランナー」というツールが注目されているそうなので、実際に導入してみました。

タスクランナーとは

ウェブ制作における様々な処理のことを「タスク」といいます。
例えば、WEBサイト制作作業では、コーディングの前に使用する画像を圧縮したり、Sassファイルをコンパイルしたりと、手動でおこなうと細かなルーチンワークが生じます。これらを自動化してくれるのが「タスクランナー」です。タスクランナーを使用することで、開発工数の短縮につなげることができます。また、開発者間で共有することもできます。チーム内で一定の品質を維持しながら開発できるようになります。

Glup(ガルプ)はいくつかあるタスクランナーのうちの一つです。ほかにもGrunt(グラント)というツールもあります。下記が二つの違いになります。

  • Glup
    • 記述型式：JavaScript形式
    • 処理方法：非同期処理
  • Grunt
    • 記述型式：JSON形式
    • 処理方法：同期処理

Gulpの導入手順（Windows向け）

Node.jsのインストール

公式サイトから「推奨版」または「最新版」を選択しダウンロードします。

『公式サイトのＵＲＬ：https://nodejs.org/ja/ 』

コマンドプロンプトを起動し、Node.jsのバージョンを下記コマンドを入力し、確認します。

▼コマンドライン
「node -v」
そして、「v8.12.0」のようにバージョンが表示されればNode.jsは無事にインストール完了です。

package.jsonファイルの作成

今回作業するフォルダ（以下、プロジェクトフォルダ）を任意の場所に作成し、その場所に下記コマンドを入力して移動します。
※今回は「my-project」がプロジェクトフォルダという前提で解説します。
▼コマンドライン
「cd C:\Project\●●●\my-project」
上記の様に入力し、コマンドを実行させるフォルダへの移動が完了したら、下記のコマンドを入力し、「package.json」ファイルを生成します。
▼コマンドライン
「npm init -y」

下記の様に出力されたら、「package.json」ファイルの生成が完了です。
※環境によっては違う内容 (ディレクトリ名やディレクトリ構造) の場合もあります。

Wrote to C:\Project\htdocs\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"
}

Glupのインストール

Gulp本体をローカル環境に（プロジェクトフォルダ以下で使えるように）インストールします。
▼コマンドライン
「npm install -D gulp」
※ package.jsonファイルを開くと、devDependenciesというキーに、インストールしたプラグイン名とバージョンが記載されていることを確認できます。これでGulpのインストールは完了になります。

最後に

今回は主に環境構築の内容になりました。
あとは、実際にタスク(処理内容)のファイルを作成等をすることで、Gulpの便利さを実感することができると思います。
タスクの作成方法や実行方法については次回以降でご紹介したいと思います。

【今回参考にさせていただいたサイト】
ics.media