gulpのバージョンアップに伴い書き方を変えないと自動コンパイルしてくれなくなったので困っていましたが、以前参照したサイトがver4に対応した書き方を掲載していてくれたのでそれを参照して書き直したところコンパイルを監視してくれるようになりました。
// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
// style.scssの監視タスクを作成する
gulp.task('default', function () {
// ★ style.scssファイルを監視
return gulp.watch('sass/**/*.scss', function () {
// style.scssの更新があった場合の処理
// style.scssファイルを取得
return gulp.src('sass/**/*.scss')
// Sassのコンパイルを実行
.pipe(sass({
outputStyle: 'expanded'
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on('error', sass.logError))
// cssフォルダー以下に保存
.pipe(gulp.dest('css'));
});
});
話は変わりますが、自宅のwindows環境だと3回に1回くらいコンパイルできていなくて不便なのでcompassを使ってコンパイルしてます・・・。
scssのコンパイルをcompassからgulpに変えて作業しています。
とりあえすscssをcss にコンパイルしてくれれば良いので下記のような設定で利用しています。
// gulpプラグインの読み込み
const gulp = require('gulp');
// Sassをコンパイルするプラグインの読み込み
const sass = require('gulp-sass');
// style.scssの監視タスクを作成する
gulp.task('default', function () {
// ★ style.scssファイルを監視
gulp.watch('scss/**/*.scss', function () {
// style.scssの更新があった場合の処理
// style.scssファイルを取得
gulp.src('scss/**/*.scss')
// Sassのコンパイルを実行
.pipe(sass({
outputStyle: 'expanded'
})
// Sassのコンパイルエラーを表示
// (これがないと自動的に止まってしまう)
.on('error', sass.logError))
// cssフォルダー以下に保存
.pipe(gulp.dest('css'));
});
});
保存するたびに自動でコンパイルしてくれるので、しばらくはこれで事足りそうな感じ。