简体   繁体   English

更改文件时,Gulp 不会编译我的 sass

[英]Gulp isn't compiling my sass when a file is changed

I'm using Gulp to compile my SCSS into CSS.我正在使用 Gulp 将我的 SCSS 编译成 CSS。 When I initiate the Gulp command it will compile everything fine, but when I make a change to one of my SCSS files Gulp does nothing.当我启动 Gulp 命令时,它会编译一切正常,但是当我对我的 SCSS 文件之一进行更改时,Gulp 什么也不做。 So obviously its an issue with my Watch right?很明显,这是我的手表的问题,对吗?

I cant for the life of me figure out whats up, I've been searching for hours.我一生都无法弄清楚发生了什么,我一直在寻找数小时。

Here is what my Gulpfile.js and Folders look like.这是我的 Gulpfile.js 和文件夹的样子。

// Include gulp                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              
var gulp = require('gulp'); 

// Include Our Plugins
var sass = require('gulp-sass');
var concat = require('gulp-concat');
var rename = require('gulp-rename');

// Compile Our Sass
gulp.task('sass', function() {
    return gulp.src('scss/*.scss')
    .pipe(sass({outputStyle: 'compressed'}))
    .pipe(gulp.dest('css'));                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     
});

// Watch Files For Changes
gulp.task('watch', function() {
    gulp.watch('scss/*.scss' ['sass']);
});

// Default Task
gulp.task('default', ['sass', 'watch']);

Folder structure:文件夹结构:

gulpfile.js

    |
    |_ [scss folder]
        app.scss (this has all my imports)

        |
        |_ [pages folder]
                _thing.scss
                _thingtwo.scss

        |_ [general folder]
                _general.scss
                _generaltwo.scss

        |_ [widgets folder]
                _widget.scss
                _widgettwo.scss

       [css folder]

I believe my Gulp watch is looking inside of my scss folder for any changes to any scss in any folder.我相信我的 Gulp 手表正在查看我的 scss 文件夹中的任何文件夹中的任何 scss 的任何更改。 I tried moving my partials into the scss folder but still it doesn't compile when I save.我尝试将我的部分移动到 scss 文件夹中,但在我保存时它仍然无法编译。

The glob string you have there are only looking one folder deep.您在那里的 glob 字符串只能查找一个文件夹深。 If you want to watch all files in the scss directory and all its sub-directories, change the glob statements to scss/**/*.scss in the watch task.如果要查看 scss 目录及其所有子目录中的所有文件,请将 watch 任务中的 glob 语句更改为scss/**/*.scss

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM