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の更新があると自動でコンパイルされるようになります。
でもこれずっとコマンドプロンプト起動していないとダメなんですね。
そりゃそうかー。