【gulp4入門】インストールから使い方まで徹底解説！

今回は、gulp4について、インストールから使い方までを、詳しく紹介していきたいと思います。

gulpとは

gulpは、様々な作業を自動で行ってくれる、タスクランナーと呼ばれるものです。

gulp

タスクランナーというのは、小さな作業、いわゆるタスクをひとつずつまとめておき、それらを自動的に実行することができるものです。

小さな作業というのは、画像を圧縮したり、PugをHTMLにコンパイルしたり、SassをCSSにコンパイルしたり、といったものです。

ただ、導入には少し手順を踏まなくてはなりません。今回はその手順も含め、解説していきます。

まず、gulpインストールするには、npmなどのパッケージ管理ツールを使います。
npmは、Node.jsをインストールすることで同時にインストールされます。

Node.jsをインストール

gulpのインストールに必要なnpmを使えるようにするため、Node.jsをインストールしましょう。

Node.js公式サイト（https://nodejs.org/ja/）

インストールの方法は、以下のリンクを参考にしてください。

Windowsの場合

WindowsにNode.jsをインストールする方法

Macの場合

MacにNode.jsをインストールする方法

プロジェクトの初期化（npm init）

まず、プロジェクトの初期化をしていきます。
WindowsであればPowerShell、Macであればターミナルを開き、作業したいディレクトリへ移動します。

ディレクトリへの移動は、cdコマンドを使います。

たとえば、デスクトップにあるgulp-projectというディレクトリに移動したい場合は、以下のようにします。
（Windowsのコマンドプロンプトでは、ホームディレクトリを表す「~」を使うことができないのでご注意ください）

$ cd ~/Desktop/gulp-project/

cdコマンドの詳しい使い方については、以下の記事を参考にしてください。

Windowsの場合

【初心者向け】cdコマンドの使い方を分かりやすく解説！（Windows）

Macの場合

【初心者向け】cdコマンドの使い方を分かりやすく解説！（Mac）

作業用ディレクトリに移動したら、「package.json」というファイルを作成します。
「package.json」というのは、プロジェクト名やライセンスなどの情報をまとめておけるものです。

package.jsonを作成するには、npm initというコマンドを使います。

$ npm init

すると、情報を順番に入力していくことができます。
（後からpackage.jsonの編集も可能ですので、それほど深く考える必要もありません）

また、-yというオプションをつけることで、入力を省略することができます。

$ npm init -y

すると、次のようなpackage.jsonが作られます。

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

これで、今回のプロジェクトの初期化を行なうことができました。

npmでgulpをインストール

では、gulpをインストールしていきましょう。

では、npmを使って、gulpをインストールします。

$ npm install gulp --save-dev

--save-devというオプションをつけることで、先ほど作成したpackage.jsonに、以下の内容が追加されます。

"devDependencies": {
  "gulp": "^4.0.2"
}

では、gulpのバージョンを確認してみましょう。
ローカルにインストールされたコマンド（ここではgulp）を実行するには、npxというコマンドを使いますので、次のようになります。

$ npx gulp --version
CLI version: 2.3.0
Local version: 4.0.2

gulpfile.jsの作成

gulpfile.jsを作ります。
gulpfile.jsは、gulpの動きを制御するためのファイルです。

例えば、以下のようなgulpfile.jsファイルを作ります。

gulpfile.js

const message = cb => {
    console.log( 'gulpを使おう' );
    cb();
}

exports.default = message;

6行目のように、defaultとし、動かしたいタスクを設定することで、gulpコマンドを実行したときに、そのタスクを動かすことができます。

ローカルにインストールされたコマンドを実行するには、npxを使いますので、次のようになります。

$ npx gulp
[22:31:49] Using gulpfile ~/Desktop/gulp-project/gulpfile.js
[22:31:49] Starting 'default'...
gulpを使おう
[22:31:49] Finished 'default' after 3.08 ms

「gulpを使おう」と表示されれば成功です。

では、6行目のdefaultをmessageに変更してみます。

const message = cb => {
    console.log( 'gulpを使おう' );
    cb();
}

exports.message = message;

この場合は、gulpの後ろにmessageをつけることによって、messageタスクを実行することができます。

$ npx gulp message
[22:32:26] Using gulpfile ~/Desktop/gulp-project/gulpfile.js
[22:32:26] Starting 'message'...
gulpを使おう
[22:32:26] Finished 'message' after 764 μs

gulpを使ってファイルをコピーする

つづいて、gulpによるファイルの操作を学んでいきましょう。

まず、ファイルをコピーする方法を見ていきます。

例として、gulpfile.jsがある階層にsrcフォルダを作成し、その中にtest.jsファイルを作ります。

gulp-project
|-- gulpfile.js
|-- src/
|   `-- test.js
`-- output/

このtest.jsファイルをgulpを使ってoutputフォルダへコピーします。

gulpfile.js

const {src, dest} = require('gulp');

const copy = () => {
    return src('src/**/*.*')
        .pipe(dest('output/'));
}

exports.copy = copy;

あとは次のコマンドを実行します。

$ npx gulp copy

すると、outputフォルダにtest.jsがコピーされます。

上記の例ではcopyという関数を作成していますが、これは省いて短くすることもできます。

gulpfile.js

const {src, dest} = require('gulp');

exports.copy = () => {
    return src('src/**/*.*')
        .pipe(dest('output/'));
}

gulp-sassを使って、SassをCSSにコンパイルする

sassをcssにコンパイルするためのパッケージを追加していきます。
gulp-sassとsassをインストールしましょう。

PowerShell、またはターミナルに、以下を入力します。

$ npm install gulp-sass sass --save-dev

gulpfile.jsは、次のようにします。

gulpfile.js

const {src, dest} = require('gulp');
const sass = require('gulp-sass')(require('sass'));

exports.scss = () => {
    return src('src/scss/**/*.scss')
        .pipe(sass())
        .pipe(dest('output/css/'));
}

では、実際にSassをコンパイルしてみましょう。
まず、Sass（.scss）ファイルを作っていきます。

gulp-project
|-- gulpfile.js
|-- src/
|   `-- scss/
|       `-- style.scss
`-- output/

src/scss/style.scss

.article {
    h1 {
        color: #222;
    }
}

ターミナルで、以下のコマンドを実行します。

$ npx gulp scss

これで、SCSSをCSSにコンパイルすることができます。

output/css/style.css

.article h1 {
  color: #222;
}

ファイルの変更を監視

gulpには、ファイルの変更を監視する機能があります。

gulpfile.js

const {src, dest, watch} = require('gulp');
const sass = require('gulp-sass')(require('sass'));

const compileScss = () => {
    return src('src/scss/**/*.scss')
        .pipe(sass())
        .pipe(dest('output/css/'));
}

exports.scss = compileScss;

exports.watch = () => {
    watch('./src/**/*.scss', compileScss);
}

これで.scssファイルを監視して、それが保存されたとき、自動的にSCSSがコンパイルされるようになります。

以下のコマンドで、watchを実行できます。

$ npx gulp watch

watchを終了するには、「control + c」を押します。

直列タスク（series）、並列タスク（parallel）について

つづいて、seriesとparallelについて見ていきましょう。

まずseriesはタスクを順番に実行していくメソッドです。

gulpfile.js

const {series} = require('gulp');

const cat = cb => {
    console.log('ニャー');
    cb();
}

const dog = cb => {
    console.log('ワン');
    cb();
}

exports.animals = series(cat, dog);

実際に実行してみると、catがスタートしてニャーと言ったら終了し、dogがスタートしてワンと言ったら終了というふうに、順番に実行されているのが分かります。

$ npx gulp animals
[22:36:32] Using gulpfile ~/Desktop/gulp-project/gulpfile.js
[22:36:32] Starting 'animals'...
[22:36:32] Starting 'cat'...
ニャー
[22:36:32] Finished 'cat' after 324 μs
[22:36:32] Starting 'dog'...
ワン
[22:36:32] Finished 'dog' after 312 μs
[22:36:32] Finished 'animals' after 1.56 ms

続いて、parallelはタスクを同時に実行するメソッドです。

gulpfile.js

const {parallel} = require('gulp');

const cat = cb => {
    console.log('ニャー');
    cb();
}

const dog = cb => {
    console.log('ワン');
    cb();
}

exports.animals = parallel(cat, dog);

実際に実行してみると、catとdogが同時に実行されていることが分かります。

$ npx gulp animals
[22:36:43] Using gulpfile ~/Desktop/gulp-project/gulpfile.js
[22:36:43] Starting 'animals'...
[22:36:43] Starting 'cat'...
[22:36:43] Starting 'dog'...
ニャー
[22:36:43] Finished 'cat' after 429 μs
ワン
[22:36:43] Finished 'dog' after 707 μs
[22:36:43] Finished 'animals' after 1.49 ms

グロブについて

グロブはファイルのディレクトリを指定するときに役立つものです。

*	任意の文字数（’*.js’）
**	0個以上の階層（’**/.js’）
!	そのファイルを省く。除外（’!img/img.jpg’）

他にも色々ありますが、よく使うのはこの3つです。

gulp4では、taskメソッドは非推奨に

gulp4以前のgulpでは、taskメソッドを使ってタスクを作成しておりましたが、これは非推奨になったようです。
タスクはエクスポート（exports）することで使えるようになります。

まとめ

以上、gulpの使い方を詳しくまとめました。
その他にもgulpには様々なツールがあります。そのツールを使うと、もっと快適な環境を作ることができます。

gulpを活用して、自分だけの快適なオリジナル環境をつくると楽しいです。

• Tweet
• Facebook
• はてブ
• Pocket