GULPの始め方

2021年7月20日GULP

GULPの始め方を紹介します。

GULPを始める手順

前提として、Node.jsとnpmがインストールされている必要があります。

そして、Gulpのcliをグローバルにインストールしておきます。
gulpをグローバルにインストール

sudo npm install gulp-cli --g

Gulpを使う手順は以下の通りです。

• package.jsonを作成
• gulpをインストール
• プラグインをインストール
• gulpfile.jsを作成

package.jsonを作成

npm init
or
yarn init -y

でpackage.jsonを作成します。

GulpをdevDependenciesにインストール

npm install gulp --save-dev
or
yarn add gulp --dev

でgulpをインストールします。
開発時に利用するパッケージの場合は--save-devを指定します。
Gulpは開発時に利用するので、上のコマンドとなります。
そうすると、package.jsのdevDependenciesの項目に記述されます。
gulpでいろんなプラグインをインストールすることになりますが、
それらも基本的にはpackage.jsのdevDependenciesに記述されるように--save-devをつけます。

バージョンを確認する

gulp -v
//CLI version: 2.3.0
//Local version: 4.0.2

Gulpのバージョンを確認したいとき、上のコマンドでバージョンの確認ができます。

gulpfile.jsを作成

フォルダに移動して、

touch gulpfile.js

とするかgulpfile.jsというファイルを手動で作成します。

Gulpを使ってみる

gulpfile.jsに以下を記述していきます。

gulp.task('hi', () => {
console.log('こんにちは GULP');
})

Did you forget to signal async completion?というエラーが出ます。
gulp.taskは非同期処理のため、Node.jsに終わりを知らせる必要があります。

gulp.task('hi', (done) => {
console.log('こんにちは GULP');
done();
})

コールバック関数の第一引数に任意の名前をつけて(上の場合done)そして、それを最後に実行することで処理の終わりを知らせることができます。

分割代入を使う

// const gulp = require('gulp');
const { task } = require('gulp');
const task = require('gulp').task;

定義部分は上のように分割代入を使って書き換えることもできます。
その場合、gulpをつける必要がなくなるので、関数は次のようにgulpをとります。

task('hi', (done) => {
  console.log('こんにちは GULP');
  done();
})

Gulpに非同期の終わりを伝える方法

//returを使う
task('hi-2', () => {
  return gulp.src('./src/sass/main.scss').pipe(sass()).pipe.dest('./dist/css');
})
//コールバック関数を使う
task('hi-2', (done) => {
  gulp.src('./src/sass/main.scss').pipe(sass()).pipe.dest('./dist/css');
  done();
})

上のように、doneを引数に渡して終わりに実行する方法と、returnする方法があります。