CODEWITHSUNDEEP
javascriptgulp
Miha Šušteršič
Miha Šušteršič

Reputation: 10062

Gulp watch does nothing

Following this tutorial, I've setup a basic gulp config along with a .scss file that I want compiled into .css using gulp-sass. When I run gulp watch from the console, the watch task register fine, but nothing happens when I edit the .scss file, and I can't figure out why.

gulpfile.js

var gulp = require('gulp');  
var sass = require('gulp-sass');

//style paths
var sassFiles = 'assets/styles/sass/**/*.scss',  
    cssDest = 'assets/styles/css/';

gulp.task('styles', function(){  
    gulp.src(sassFiles)
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

gulp.task('watch', function() {  
    gulp.watch('sassFiles',['styles']);
});

terminal output:

shooshte@M:~/Webpages/CV2$ gulp watch
[20:38:40] Using gulpfile ~/Webpages/CV2/gulpfile.js
[20:38:40] Starting 'watch'...
[20:38:40] Finished 'watch' after 5.37 ms

Upvotes: 2

Views: 779

Answers (1)

Simon Merrick
Simon Merrick

Reputation: 762

You were passing 'sassFiles' (as a string) and not the sassFiles variable.

gulp.task('watch', function() {  
    gulp.watch(sassFiles,['styles']); // Removed '' around sassFiles 
});

I also noticed you are passing the sassFiles variable into your styles task. I'm a bit foggy but I don't think this works and further more It may, as suggested, indicate a poor directory structure.

The suggested methods for how to structure a sass project vary, but all share one common factor. They suggest breaking up your sass into partials prefixed with an underscore

/styles
  application.scss
  _footer.scss
  _header.scss
  _sidebar.scss

And then importing them all into a single top level scss file. application.scss

@import "footer";
@import "header";
@import "sidebar";

You can then just tell the styles task to compile application.scss and all of the files referenced as imports will get pulled in automatically.

gulp.task('styles', function(){  
    gulp.src('assets/styles/sass/application.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest(cssDest));
});

Upvotes: 6

Related Questions