Gulp 不会关注导入的 sass 模块



我正在尝试设置gulp并观察文件更改,然后重新加载浏览器同步。修改 main.sass 文件工作正常,但是当导入 main.sass 文件时,gulp 看不到它。同样的情况也发生在哈巴狗身上,修改包含对于 gulp-watch 是隐藏的。

我尝试过:

  1. 包含路径在某些方面

  2. 尝试在 gulp.src(( 路径中编写,例如"desktop/css/**/*.sass",但它导致导入的模块被编译在一个单独的文件中,这是错误的行为(可悲的是,不是我预期的(。

我导入的文件在desktop/css/modules/*.sass,条目 sass 文件 (main.sass( 在desktop/css/main.sass

我的古尔普文件

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}`)
  })
}) 

糟糕,问题出在监视方法中:我只观看了桌面/css文件夹中的.sass文件,其中只有main.sass文件。哈巴狗也一样。希望它能帮助某人。

最新更新