しらべものドット宇宙HTMLコーダーが必死こいて〇〇〇を目指すブログ

【Gulp】gulp 事始め

参考サイト

Quick Start | Gulp
https://gulpjs.com/docs/en/getting-started/quick-start

Node.js のバージョンを確認する。(執筆時 v18.12.1)

node -v

npm のバージョンを確認する。(執筆時 8.19.2)

npm -v

npx のバージョンを確認する。(執筆時 8.19.2)

npx -v

gulpをインストールする。

npm install gulp-cli

作業用フォルダをつくり、そこへ移動する。

mkdir practice-01
cd practice-01

作業フォルダに package.json をつくる。

npm init

作業フォルダの devDependencies に gulp をインストールする。

npm install -S gulp

Gulpのバージョンを確認する。(執筆時 CLI version: 2.3.0 Local version: 4.0.2)

※ git bash では、gulp が Command not found. になったので、wsl に切り替えて実行した。

gulp --version

gulpfile.js をつくる。

touch gulpfile.js

つくった gulpfile.js ファイルに、以下を記述する。

function defaultTask(cb) {
  cb();
}
exports.default = defaultTask

gulpの挙動を確認する。

プロジェクトフォルダで以下のコマンドを実行する。

gulp

何も実行せずに以下のように表示されれば成功。

[11:53:18] Using gulpfile /mnt/c/_dev/2023-01-06_01_gulp/practice-01/gulpfile.js
[11:53:18] Starting 'default'...
[11:53:18] Finished 'default' after 1.16 ms

※ gulp に複数のタスクを含めた場合、以下のコマンドで実行する。

gulp <task> <othertask>

次のステップ

JavaScript and Gulpfiles | Gulp
https://gulpjs.com/docs/en/getting-started/javascript-and-gulpfiles