Gulp Watch tasks finishing early

Question

I have a gulp file that runs Sass and injects my CSS, app and Bower js files in separate tasks. I would like, at the end of the task, to watch my SCSS files and run Sass on change, and application code and inject new files (with a view to livereload when I can get this working).

Unfortunately, I've run into a problem where my watch tasks end early, therefore no changes are being watched for.

I've read in another question that the watch tasks have to be returned, however, this did not help...

Here is my gulpfile (with prod tasks removed)

const gulp = require('gulp')
// plugins
const concat = require('gulp-concat')
const uglify = require('gulp-uglify')
const rename = require('gulp-rename')
const closure = require('gulp-jsclosure')
const rev = require('gulp-rev')
const sass = require('gulp-sass')
const cssmin = require('gulp-cssmin')
const bower = require('main-bower-files')
const strip = require('gulp-strip-comments')
const inject = require('gulp-inject')
const ngannotate = require('gulp-ng-annotate')
const mainBowerFiles = require('main-bower-files')
const templateCache = require('gulp-angular-templatecache')
const minifyHtml = require('gulp-minify-html')
const path = require('path')
const babel = require('gulp-babel')
const es = require('event-stream')

// configuration variables
const config = {
    dir: {
        root: 'client/',
        app: './Dist/',
        vendor: './Dist/',
        css: 'client/',
        cssMin: './Dist/',
        bower: 'client/wwwroot/lib',
        index: './Views/Shared/_Layout.cshtml',
        indexDir: './Views/Shared',
        modules: 'client/app/modules'
    },
    filters: {
        app: 'client/app.js',
        appModules: 'client/app/modules/**/*.module.js',
        appModuleFiles: 'client/app/modules/**/*.js',
        vendors: 'client/vendors/**/*.js',
        templates: 'client/app/modules/**/*.html',
        client: 'client/app/css/**/*.scss'
    }
}

//----------CSS---------
gulp.task('sass', () => {
    return gulp.src(['client/app/css/bootstrap.scss', 'client/app/css/app.scss', 'client/app/css/themes/theme-f.scss'])
        .pipe(sass().on('error', sass.logError))
        .pipe(gulp.dest('build/css'));
})

gulp.task('inject-css', ['sass'], () => {

    var sources = gulp.src(['build/css/bootstrap.css', 'build/css/app.css', 'build/css/theme-f.css'], { read: false }, { name: 'css' });

    return gulp.src(config.dir.index)
        .pipe(inject(sources))
        .pipe(gulp.dest(config.dir.indexDir));
})

//--------End CSS-------


//----------App---------
gulp.task('inject-js', ['inject-bower'], () => {

    var sources = gulp.src([config.filters.app, config.filters.appModules, config.filters.appModuleFiles], { read: false });

    return gulp.src(config.dir.index)
        .pipe(inject(sources))
        .pipe(gulp.dest(config.dir.indexDir));
})
//--------End App-------


//---------Vendor-------
gulp.task('inject-bower', ['inject-css'], () => {

    let bower = gulp.src(mainBowerFiles(), { read: false }, { relative: true })

    return gulp.src(config.dir.index)
        // .pipe(inject(es.merge(bower, vendors), { name: 'vendor' }))
        .pipe(inject(bower, { name: 'vendor' }))
        .pipe(gulp.dest(config.dir.indexDir));
})
//-------End Vendor-----


//----------Prod--------

//---------Watches-------
gulp.task('scripts:watch', () => {
    return gulp.watch([config.filters.app, config.filters.appModuleFiles], ['inject-js']);
})


gulp.task('sass:watch', () => {
    return gulp.watch(config.filters.scss, ['sass']);
})

gulp.task('watch', ['scripts:watch', 'sass:watch'], () => {
    console.log(" ");
    console.log("Watching for changes...");
    console.log(" ");
})

//-------End Watches-----

//----------Tasks--------

gulp.task('default', ['inject-js', 'inject-bower', 'inject-css',' watch'], () => {

    // gulp.watch([config.filters.app, config.filters.appModuleFiles], ['inject-js'])
    // gulp.watch(config.filters.scss, ['sass'])
})

As you can probably see from the commented out code, I have also tried running these watched directly inside of the default task.

This is the console output from running gulp

[12:48:12] Using gulpfile C:\source\Icon.Admin\src\UI\Icon.Admin\gulpfile.js
[12:48:12] Starting 'scripts:watch'...
[12:48:12] Finished 'scripts:watch' after 145 ms
[12:48:12] Starting 'sass:watch'...
[12:48:12] Finished 'sass:watch' after 180 μs
[12:48:12] Starting 'watch'...

Watching for changes...

[12:48:12] Finished 'watch' after 159 μs

Any help with this is greatly appreciated!

Answer 1

Fixed this by running my watch tasks inside of the main watch task:

gulp.task('watch', [], () => {
    console.log(" ");
    console.log("Watching for changes...");
    console.log(" ");
    gulp.watch([config.filters.app, config.filters.appModuleFiles], ['inject-js']);
    gulp.watch(config.filters.client, ['sass']);
})