gulp触ってみた

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だけでは怒られる問題<br>Error: Cannot find module 'sass'
gulp-sassだけインストールした状態でnpx gulpの起動コマンドを叩いたところ発生。
```
Error: Cannot find module 'sass'
```
以下コマンドでsassをインストールすることで解消。
```
npm i -D sass
```


# 参考
https://ics.media/entry/3290/#4.-gulp%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB

https://ginneko-atelier.com/blogs/entry522/