CODEWITHSUNDEEP
javascriptcsssassgulpgulp-watch
LukeD1uk
LukeD1uk

Reputation: 242

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

I'm using Gulp to compile my SCSS into 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. 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.

// 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. I tried moving my partials into the scss folder but still it doesn't compile when I save.

Upvotes: 3

Views: 1786

Answers (1)

jrossi
jrossi

Reputation: 196

The glob string you have there are only looking one folder deep. 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.

Upvotes: 2

Related Questions