Gulp watch not watching

Question

I am having some issues with my gulpfile configuration when I edit main.scss, gulp watch is running in the terminal but it does not detect the changes made in main.scss, but when I run gulp.sass, it detects the changes, I have looked through some of the other "gulp watch issues" and I still can't find a fix, what am I doing wrong? Let me know if it needs to be more clear

Folder directory - 
weather-app
 ---node_modules
 ---public
    ---css
        ---main.css
    ---js
        ---main.js
 ---index.html
 ---src
    ---sass
        ---main.scss
        ---mobile.scss
    ---js
        ---main.js
 ---gulpfile.js
 ---package-lock.json
 ---package.json

const gulp = require('gulp'),
  sass = require('gulp-sass'),
  uglifyCss = require('gulp-uglifycss'),
  concatCss = require('gulp-concat-css');


gulp.task('sass', () => {
  gulp.src('src/sass/*.scss')
    .pipe(sass())
    .pipe(uglifyCss({
      'uglyComments': true
    }))
    .pipe(concatCss('main.css'))
    .pipe(gulp.dest('public/css'))
})

gulp.task('default', ['sass']);



gulp.task('watch', () => {
  gulp.watch('src/sass/*.scss', ['watch'])
})

What does the folder structure look like. Where does the `main.scss` sit in the directory structure? — Ishant Solanki, Oct 13 '18 at 23:59

Quentin Veron · Answer 1 · 2018-10-14T00:15:39.710

2

gulp.watch mustn't be a returned value.
Don't forget to use the double asterisk as well, for targeting any .scss file inside your sass folder.

About the ** glob character

gulp.task('watch', function() {
  gulp.watch('src/sass/**/*.scss', ['watch'])
})

edited Oct 14 '18 at 00:15

answered Oct 14 '18 at 00:10

Quentin Veron

3,079
1
14
32

score 1 · Answer 2 · answered Oct 14 '18 at 00:12

1

change the gulp watch line to gulp.watch('src/sass/**/*.scss', ['watch'])

answered Oct 14 '18 at 00:12

Ishant Solanki

205
2
13

1

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Kalle Richter Oct 14 '18 at 08:58

score 0 · Answer 3 · answered Oct 17 '18 at 19:40

const gulp = require('gulp'),
    sass = require('gulp-sass'),
    uglifyCss = require('gulp-uglifycss'),
    concatCss = require('gulp-concat-css');


gulp.task('sass', () => {
    gulp.src('src/sass/**/*.scss')
        // gulp.src('src/sass/*.scss')
        .pipe(sass())
        .pipe(concatCss('main.css'))
        .pipe(uglifyCss({
            'uglyComments': true
        }))
        .pipe(gulp.dest('public/css'))

})

gulp.task('default', ['watch']); //i changed 'sass' to 'watch'



gulp.task('watch', function () {
    gulp.watch('src/sass/**/*.scss', ['sass'])
})

thanks, everyone for contributing, I fixed it, it was a minor error I overlooked

score 0 · Answer 4 · answered Oct 18 '18 at 10:31

This is the wrong line:

gulp.task('default', ['sass']);

So you must call watch as default task. So this is solution:

gulp.task('default', ['watch']);

AND this line change from

 gulp.watch('src/sass/*.scss', ['watch'])

to

 gulp.watch('src/sass/*.scss', ['sass'])

That's all. :)

Gulp watch not watching

4 Answers4