私はgulpを設定し、ファイルの変更を監視してからbrowserSyncをリロードしようとしています。 main.sassファイルの変更はうまくいきますが、main.sassファイルにインポートすると変更されますが、gulpはそれを見ません。 pugにも同じことが起こりますが、includeはgulp-watchのために隠されています。GulpはインポートされたSassモジュールを監視しません
私が試したもの:
includePathsを
がgulp.srcに書き込もうとしたいくつかの方法で( ')。デスクトップ/ CSS/**/* SASS' のようなパス、しかし、それはインポートされたモジュールが別々のファイルにコンパイルされてしまっていました。これは間違った動作です(悲しいことではありません)。
私のインポートしたファイルはdesktop/css/modules/*.sass
であり、エントリSASSファイル(main.sassは)desktop/css/main.sass
マイgulpfileある
import gulp from 'gulp'
import sass from 'gulp-sass'
import autoprefixer from 'gulp-autoprefixer'
import cleanCSS from 'gulp-clean-css'
import pug from 'gulp-pug'
import pump from 'pump'
import browserSync from 'browser-sync'
const browserSyncServer = browserSync.create()
gulp.task('desktop-styles',() => {
gulp.src('desktop/css/*.sass')
.pipe(sass({ includePaths: ['desktop/css/modules'] }))
.pipe(autoprefixer())
.pipe(cleanCSS())
.pipe(gulp.dest('desktop/build/css'))
.pipe(browserSyncServer.stream())
})
gulp.task('desktop-html',() => {
gulp.src('desktop/templates/*.pug')
.pipe(pug())
.pipe(gulp.dest('desktop/build'))
.pipe(browserSyncServer.stream())
})
gulp.task('desktop', ['desktop-html', 'desktop-styles'],() => {
browserSyncServer.init({
server: "./desktop/build"
})
gulp.watch('desktop/templates/*.pug', ['desktop-html']).on('change', (e) => {
console.log(` HTML File ${e.path} has been ${e.type}`)
})
gulp.watch('desktop/css/*.sass', ['desktop-styles']).on('change', (e) => {
console.log(` CSS File ${e.path} has been ${e.type}`)
})
})