Sassを監視して変更があったらファイルを自動コンパイルする

watch機能を使います。

gulpfile.jsの

gulp.taskに

return gulp.watch(“scssファイルのパス”, function() {});

で囲みます

// gulpプラグインの読み込み
const gulp = require(“gulp”);
// Sassをコンパイルするプラグインの読み込み
const sass = require(“gulp-sass”);

// style.scssの監視タスクを作成する
gulp.task(“default”, function() {
// ★ style.scssファイルを監視
return gulp.watch(“scss/style.scss”, function() {
// style.scssの更新があった場合の処理

// style.scssファイルを取得
return (
gulp
.src(“scss/style.scss”)
// Sassのコンパイルを実行
.pipe(
sass({
outputStyle: “expanded”
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on(“error”, sass.logError)
)
// cssフォルダー以下に保存
.pipe(gulp.dest(“css”))
);
});
});

記述したらコマンドから

npx gulp

と打ち込むと監視が開始されてscssの更新があると自動でコンパイルされるようになります。

でもこれずっとコマンドプロンプト起動していないとダメなんですね。
そりゃそうかー。