gulp-sassが2回更新しないと適用されない問題

概要

gulpを使う場合、処理Aで生成したファイルを
処理Bで使用したい場合は処理A→処理Bとseriesでつなぐのではなく、
処理(A+B)を用意する必要がある

問題の具体例

gulp-sassでコンパイルしたcssを見たら
要素ごとにメディアクエリが出力されていた。 大した量でもないのだけれど、
やはり気持ち悪いのでなんとかしたい。 調べてみると
pleeeaseのmqpacker機能でまとめてくれるらしい。

gulp-pleeease – npm

失敗例

以下のコードで試す。(失敗する)

// gulpfile.js

// sass
gulp.task('sass', done => {
  gulp.src('./css/style.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(gulp.dest('./css'))
  done()
});

// pleeease
gulp.task('pleeease', done => {
  gulp.src('./css/style.css')
  .pipe(pleeease({
    mqpacker: true
  }))
  .pipe(rename({
    suffix: '.min',
    extname: '.css'
  }))
  .pipe(gulp.dest('./css'))
  done()
});

// watch
gulp.task('watch', () => {
  gulp.watch('./css/*.scss', gulp.series('sass','pleeease'));
  //  ………
})

このまま実行するとstyle.cssが見つからないとエラーが出る。
seriesの時点で中身のtaskごとのsrcをチェックしているっぽい。 なので

解決策

// gulpfile.js

// sass and pleeease
gulp.task('sass_and_pleeease', done => {
  gulp.src('./css/style.scss')
  .pipe(sass({outputStyle: 'expanded'}))
  .pipe(pleeease({
    mqpacker: true
  }))
  .pipe(rename({
    suffix: '.min',
    extname: '.css'
  }))
  .pipe(gulp.dest('./css'))
  done()
});

// watch
gulp.task('watch', () => {
  gulp.watch('./css/*.scss', gulp.task('sass_and_pleeease'));
  //  ………
})

解決。
当たり前と言えば当たり前なのだけれども。 表題の件は
すでにstyle.cssがある環境で上記のコードを実行したため、
エラーが出ずにいらない苦労した、という話でした。 というか、そもそもpleeeaseでsassコンパイルできるっぽい。
追加でいらない苦労の可能性が。