Gulpのインストール方法

Gulpのインストールには「npm」のコマンドを使います。
(「npm」のコマンドを使うためにNode.jsの事前インストールが必要)

Node.jsのインストール方法 >>

■Gulpインストールまでのコマンド

cd webpro
npm init -y
npm install gulp -g
npm install gulp --save-dev

[1]　作業ディレクトリを作る・移動

今回は作業ディレクトリを「webpro」として移動

cd webpro

[2] プロジェクトの初期化（npm init）/ 設定情報を書いた「package.json」を生成する

npm init -y

npm init後 package.jsonを作成
ターミナルに表示されるのはpackage.jsonの中身

% npm init -y
{
“name”: “webpro”,
“version”: “1.0.0”,
“description”: “”,
“main”: “index.js”,
“scripts”: {
“test”: “echo \”Error: no test specified\” && exit 1″
},
“keywords”: [],
“author”: “”,
“license”: “ISC”
}

[4] Gulpのインストール

Gulpのインストールするコマンドを打ちます。

npm install gulp -g

% npm install gulp -g
npm notice
npm notice New minor version of npm available! 9.5.1 -> 9.6.5
npm notice Changelog: https://github.com/npm/cli/releases/tag/v9.6.5
npm notice Run npm install -g npm@9.6.5 to update!
npm notice
npm ERR! code EACCES
npm ERR! syscall mkdir
npm ERR! path /usr/local/lib/node_modules/gulp
npm ERR! errno -13
npm ERR! Error: EACCES: permission denied, mkdir ‘/usr/local/lib/node_modules/gulp’
npm ERR! [Error: EACCES: permission denied, mkdir ‘/usr/local/lib/node_modules/gulp’] {
npm ERR! errno: -13,
npm ERR! code: ‘EACCES’,
npm ERR! syscall: ‘mkdir’,
npm ERR! path: ‘/usr/local/lib/node_modules/gulp’
npm ERR! }
npm ERR!
npm ERR! The operation was rejected by your operating system.
npm ERR! It is likely you do not have the permissions to access this file as the current user
npm ERR!
npm ERR! If you believe this might be a permissions issue, please double-check the
npm ERR! permissions of the file and its containing directories, or try running
npm ERR! the command again as root/Administrator.

npm ERR! A complete log of this run can be found in:
npm ERR! /Users/toshiyukisakurai/.npm/_logs/2023-04-29T01_07_52_909Z-debug-0.log

エラーが出ました。ディレクトリの権限がなかったようなので、権限を変更します。

sudo chmod 777 /usr/local/lib
sudo chmod 777 /usr/local/lib/node_modules

もう一度installコマンドを打って saveオプションをつけます。

npm install gulp -g
npm install gulp --save-dev

[5] gulpインストール確認

-vのオプションで確認ができます。

gulp -v

CLI version: 2.3.0
Local version: 4.0.2

[6]gulpfile.jsを新規作成する

『gulpfile.js』はプロジェクトフォルダの直下、package.jsonと同じ階層に作成します
( 名前が『gulpfile.js』で中身は空のファイル)

SASSのコンパイルをするためだけにgulpを使おうとしているのであれば、
VS Codeのプラグインか、Prepos(GUIツール）を利用したほうが断然楽です。