CODEWITHSUNDEEP
javascriptgulp
Bryan White
Bryan White

Reputation: 334

Why are my gulp tasks not watching for changes?

I'm having trouble configuring my gulp file to watch. When I run the default task it runs all of the jobs that it's supposed to but if I add a file or make changes to any of the SCSS files it doesn't run the sass job (I'm also assuming that it wouldn't run imagemin or js-watch).

Below is my gulp file

var pkg = require('./package.json');
var gulp = require('gulp');

const BrowserSync = require('./gulp-tasks/browser-sync');
const Sass = require('./gulp-tasks/sass');
const Scripts = require('./gulp-tasks/scripts');
const Svg = require('./gulp-tasks/svg-sprite');
const Img = require('./gulp-tasks/img-min');

gulp.task('browser-sync-init', BrowserSync.initialize);
gulp.task('js-watch', ['js'], BrowserSync.reload);
gulp.task('reload-watch', ['copy'], BrowserSync.reload);

gulp.task('sass', Sass.build);

gulp.task('lint', Scripts.lint);
gulp.task('js', ['lint'], Scripts.build);

gulp.task('copy', function(){
    gulp.src(`${pkg.config.themeRoot}/**/*.html`)
        .pipe(gulp.dest(pkg.config.dist));
});

gulp.task('imagemin', Img.imgmin);

gulp.task('svg', Svg.build);

gulp.task('default', ['sass', 'js', 'imagemin', 'browser-sync-init'], function(){
    gulp.watch(`${pkg.config.scss}/**/*.scss`, ['sass']);
    gulp.watch(`${pkg.config.scripts}/**/*.js`, ['js-watch']);
    gulp.watch(`${pkg.config.images}/source/**`, ['imagemin']);
});

And this is the definition for pkg.config.scss

"scss": "wp-content/themes/grpw67000/assets/scss",

What could I be doing wrong?

Upvotes: 1

Views: 86

Answers (1)

Thusitha
Thusitha

Reputation: 3511

    var pkg = require('./package.json');
    var gulp = require('gulp');

    const BrowserSync = require('./gulp-tasks/browser-sync');
    const Sass = require('./gulp-tasks/sass');
    const Scripts = require('./gulp-tasks/scripts');
    const Svg = require('./gulp-tasks/svg-sprite');
    const Img = require('./gulp-tasks/img-min');

    gulp.task('browser-sync-init', BrowserSync.initialize);
    gulp.task('js-watch', ['js'], BrowserSync.reload);
    gulp.task('reload-watch', ['copy'], BrowserSync.reload);

    gulp.task('sass', Sass.build);

    gulp.task('lint', Scripts.lint);
    gulp.task('js', ['lint'], Scripts.build);

    gulp.task('copy', function(){
        gulp.src(`${pkg.config.themeRoot}/**/*.html`)
            .pipe(gulp.dest(pkg.config.dist));
    });

    gulp.task('imagemin', Img.imgmin);

    gulp.task('svg', Svg.build);

    // Watch task for gulp
    gulp.task('watch', function () {
       gulp.watch(`${pkg.config.scss}/**/*.scss`, ['sass']);
       gulp.watch(`${pkg.config.scripts}/**/*.js`, ['js-watch']);
       gulp.watch(`${pkg.config.images}/source/**`, ['imagemin']);
    });

    gulp.task('default', ['sass', 'js', 'imagemin', 'browser-sync-init', 'watch']);

Try adding a separate gulp task for watch functionality. If this is not working check if the 

${pkg.config.scss}

Correctly set the path prefix.

Upvotes: 2

Related Questions