gulpの設定を自分でしたことがなかったのでインストールと設定までの備忘。
今回はgulpを使用して以下のことができるようにする。
・sassのコンパイル
・browser-syncによるホットリロード
・watchを使用してsassファイルが更新されたら再度コンパイル、ブラウザリロード
環境
node -v
v20.14.0
パッケージインストール
package.jsonの作成
npm init -y
gulp のインストール
npm install -D gulp
gulp-sassインストール
npm install -D gulp-sass
npm install -D sass
browser-syncインストール
npm -D gulp browser-sync
ディレクトリ構成
dist/
|- css/
| |- style.css
|- index.html
src/
|- css/
|- style.scss
gulpfile.js
package.json
ファイルの中身
gulp設定に関わるファイル
package.json
{
"name": "test-project",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"start": "gulp" // gulp用の起動コマンド追加
},
"keywords": [],
"author": "",
"license": "ISC",
"description": "",
"devDependencies": {
"browser-sync": "^2.27.11",
"gulp": "^4.0.2",
"gulp-sass": "^5.1.0",
"sass": "^1.77.3"
}
}
sassのoutputStyleはnested、expanded、compact、compressedの４つから指定できる。
以下サイトでそれぞれ例が出ていたのでわかりやすかった。
https://utano.jp/entry/2018/02/hello-sass-output-style/
gulpfile.js
const { series, watch } = require("gulp");
/** ---------------------------
* プラグイン読み込み
--------------------------- */
const gulp = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const browserSync = require("browser-sync").create();
/** ---------------------------
* パス設定
--------------------------- */
const root = {
src: "./src/",
dist: "./dist/",
};
/** ---------------------------
* タスク
--------------------------- */
const compileScss = () => {
return gulp
.src(root.src + "css/style.scss")
.pipe(
sass({
outputStyle: "expanded",
})
)
.pipe(gulp.dest(root.dist + "css"));
};
const serverTask = (done) => {
browserSync.init({
server: {
baseDir: root.dist,
},
reloadDelay: 1000,
open: false, //ここ記述なし、またはtrueだとgulp起動と同時にブラウザ開く
startPath: "/index.html",
});
done();
};
const reload = (done) => {
browserSync.reload();
done();
};
/** ---------------------------
* 監視
--------------------------- */
const watcher = () =>
watch([root.src + "css/style.scss"], series(compileScss, reload));
/** ---------------------------
* 実行
--------------------------- */
exports.default = series(compileScss, serverTask, watcher);
gulp設定とは関係ないがテスト用のファイルの中身
src/css/style.scss
body {
background: orange;
}
// ネストのテスト
div {
p {
font-weight: normal;
}
}
// 変数のテスト
$fontColor: #fff;
h1 {
color: $fontColor;
}
dist/index.html
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="/css/style.css" />
</head>
<body>
テスト
</body>
</html>
gulpの起動！！
npx gulp
するとエラーがなければこんな感じでブラウザが立ち上がる。
src/css/style.scssを書き換えるとdist/css/style.cssも更新されてリロードが走る。
[18:57:24] Using gulpfile ~/Documents/test-project/gulpfile.js
[18:57:24] Starting 'default'...
[18:57:24] Starting 'compileScss'...
[18:57:24] Finished 'compileScss' after 85 ms
[18:57:24] Starting 'serverTask'...
[18:57:24] Finished 'serverTask' after 13 ms
[18:57:24] Starting 'watcher'...
[Browsersync] Access URLs:
--------------------------------------------------
Local: http://localhost:3000/index.html
External: http://192.168.10.117:3000/index.html
--------------------------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
--------------------------------------------------
[Browsersync] Serving files from: ./dist/
遭遇したエラー
gulpコマンド使えない問題
以下コマンドでgulpのバージョンを確認しようとしたところ、
gulp -v
以下エラーが発生
zsh: command not found: gulp
先頭に npx をつけることで確認できた。
npx gulp -v
CLI version: 2.3.0
Local version: 4.0.2
gulp-sassだけでは怒られる問題
Error: Cannot find module 'sass'
gulp-sassだけインストールした状態でnpx gulpの起動コマンドを叩いたところ発生。
Error: Cannot find module 'sass'
以下コマンドでsassをインストールすることで解消。
npm i -D sass
参考