概要
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'));
// ………
})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コンパイルできるっぽい。
追加でいらない苦労の可能性が。
