GulpでSCSSの自動コンパイルが動かない！？原因と解決策を解説！

2024.12.21

最近(2024年)だとあまり使われなくなったGulpですが、まだWeb制作の現場では使われている現場もあるのではないでしょうか？

そして、先日あれっとなったことがあったので記事にまとめておきます。

発生する問題

npx gulp dev を実行してブラウザは立ち上がるのに、SCSSの変更が反映されない。自動コンパイルが機能していない。

原因

gulpfile.js の記述に誤りがある可能性があります。具体的には、以下の2点が原因として考えられます。

browserSync の初期化とリロードが正しく定義されていない
gulp.watch と gulp.parallel の使い方が間違っている

解決策

1. `browserSync` の初期化とリロードを修正

browserSync を初期化する browserInit 関数と、ブラウザをリロードする browseReload 関数を以下のように修正します。

JavaScript

function browserInit(done) {
  browserSync.init({
    server: {
      baseDir: "./public",
    },
  });
  done(); // これを追加
}

function browseReload(done) {
  console.log("Reloading browser...");
  browserSync.reload();
  done(); // これを追加
}

ポイント

done() を追加することで、これらの関数をGulpのタスクとして認識させる。
done() は、タスクの完了をGulpに伝えるために必要な処理。

2. `gulp.watch` と `gulp.parallel` の使い方を修正

gulp.watch で browseReload を使用し、 gulp.parallel で browserInit を使用していることを確認します。

JavaScript

function watch() {
  gulp.watch("./src/**/*.scss", gulp.series(compileScss, browseReload));
}

exports.dev = gulp.parallel(browserInit, watch);

ポイント

gulp.watch は、ファイルの変更を監視し、変更があった場合に指定されたタスクを実行します。
gulp.parallel は、複数のタスクを並列に実行します。
- Gulpのタスクは非同期処理を含むことが多く、処理の完了を明示的に伝える必要があります。
- done() を呼び出すことで、「このタスクは完了しました」とGulpに通知することができます。
- 公式ドキュメント：https://gulpjs.com/docs/en/getting-started/async-completion