CODEWITHSUNDEEP
javascriptgulp
KingRogue
KingRogue

Reputation: 23

Gulp watch not watching

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'])
})

Upvotes: 0

Views: 1061

Answers (4)

Lukáš Műller
Lukáš Műller

Reputation: 1

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. :)

Upvotes: 0

KingRogue
KingRogue

Reputation: 23

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

Upvotes: 0

Quentin
Quentin

Reputation: 3289

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'])
})

Upvotes: 2

Ishant Solanki
Ishant Solanki

Reputation: 207

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

Upvotes: 1

Related Questions