2017-06-20 14 views
0

私はgulpを設定し、ファイルの変更を監視してからbrowserSyncをリロードしようとしています。 main.sassファイルの変更はうまくいきますが、main.sassファイルにインポートすると変更されますが、gulpはそれを見ません。 pugにも同じことが起こりますが、includeはgulp-watchのために隠されています。GulpはインポートされたSassモジュールを監視しません

私が試したもの:

  1. includePathsを

  2. が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}`) 
    }) 
}) 

答えて

0

おっと、問題は、時計の方法にあった:私は見ました。デスクトップ/ cssフォルダのsassファイル。ここではmain.sassファイルのみです。パグと同じ。それが誰かを助けることを願っています。

関連する問題