• 指當原程式碼發生變化時，工具能夠自動將源文件（如 .scss）轉換為目標文件（如 .css），不需要開發者手動執行編譯命令

• 設置自動編譯 SASS 的開發環境的好處：
  a. 提升開發效率：不需手動編譯，開發者可以專注於編寫程式碼
  b. 即時預覽：當修改 .scss 文件後，瀏覽器能夠自動刷新，讓開發者即時看到變化
  c. 減少錯誤：工具能夠自動檢測編譯錯誤，並提示錯誤位置

• 注意
  a. 文件變更的頻率：監控工具會頻繁檢測文件變化，可能會佔用系統資源
  b. 配置的複雜度：大型項目中需要合理配置自動編譯工具，以避免出現編譯衝突或性能問題

• 應用
  a. 前端開發：尤其在開發樣式頻繁變化的項目時，自動編譯讓開發流程更順暢
  b. 設計系統：當設計師頻繁調整樣式時，自動編譯可以縮短反饋循環
  c. 設置一個自動編譯 SASS 的開發環境

• 步驟：

1. 安裝 Node.js：
2. 下載並安裝 Node.js，它包含 npm，可以安裝 Gulp 等工具。
3. 安裝 Gulp 和 gulp-sass：
   npm install gulp gulp-sass --save-dev
   創建 gulpfile.js： 在項目根目錄下創建 gulpfile.js，編寫 Gulp 任務來監控和編譯 SASS 文件
   const gulp = require('gulp');
   const sass = require('gulp-sass')(require('sass'));

gulp.task('sass', function() {
return gulp.src('sass//*.scss') // 查找所有 scss 文件
.pipe(sass().on('error', sass.logError)) // 編譯成 css
.pipe(gulp.dest('./css')); // 輸出到 css 文件夾
});

gulp.task('watch', function() {
gulp.watch('sass//*.scss', gulp.series('sass')); // 監控 scss 變化
});

• 運行 Gulp 監控： 使用命令 gulp watch，Gulp 會監控 sass/ 文件夾中的所有 .scss 文件，一旦檔案變更，會自動編譯成 .css