我正在尝试设置 gulp 并观察文件更改,然后重新加载 browserSync。修改 main.sass 文件工作正常,但是当修改导入 main.sass 文件时,gulp 看不到它。 pug 也是如此,修改包含对于 gulp-watch 是隐藏的。
我尝试过的:
在某些方面包含路径
试图在 gulp.src() 路径中写入类似 'desktop/css/**/*.sass' 的路径,但它导致导入的模块在单独的文件中编译,这是错误的行为(不像可悲的是,我预料到了)。
我导入的文件在desktop/css/modules/*.sass
,入口sass文件(main.sass)在desktop/css/main.sass
我的gulp文件
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}`)
})
})
最佳答案
糟糕,问题出在 watch 方法中:我只查看 desktop/css 文件夹中的 .sass 文件,其中只有 main.sass 文件。哈巴狗也一样。希望它能对某人有所帮助。
关于css - Gulp 不监视导入的 sass 模块,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44652832/