Question

我尝试设置gulp并监视文件更改，然后重新加载browserSync。修改main.sass文件工作正常，但是当修改main.sass文件中的导入时，gulp看不到它。同样适用于哈巴狗，修改包含对于gulp-watch是隐藏的。

我尝试过的事情：

以某种方式包含路径
尝试在＆＃39; desktop / css / ** / *。sass＆＃39;中写入gulp.src（）路径，但它导致导入的模块在单独的文件中编译，这是错误的行为（不是我想象的那么可悲）。

我导入的文件位于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}`)
  })
})

Answer 1

Oops, problem was in watch method: I watched only .sass files in desktop/css folder, where is main.sass file only. Same with a pug. Hope it will help someone.

Gulp并不关注导入的sass模块

1 个答案: