Задачи Gulp Watch заканчиваются раньше

Question

У меня есть файл gulp, который запускает Sass и вставляет мои файлы CSS, app и Bower js в отдельные задачи. Я хотел бы, в конце задачи, наблюдать за моими файлами SCSS и запускать Sass на изменение, а также код приложения и вводить новые файлы (с учетом загрузки, когда я могу это сделать).

К сожалению, у меня возникла проблема, когда мои задачи для часов заканчиваются раньше, поэтому никаких изменений не наблюдают.

Я прочитал в другом question, что задачи, часы должны быть возвращены, однако, это не помогло ...

Вот мой gulpfile (с задачами Prod удалены)

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

Как вы можете видеть из кода с комментариями, я также попытался запустить эти наблюдения непосредственно внутри задачи по умолчанию.

Это выход консоли от запуска 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 

Любая помощь с этим очень ценится!

Answer 1

Fixed, запустив свои часы задачи внутри основной задачи часов:

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

Answer 2

Ну, внутри вашего sass:watch оно относится к config.filters.scss, но это не то, что можно найти в объекте конфигурации. Вероятно, почему ваш scss не компилируется.

... 

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


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

gulp.task('default', ['inject-js', 'inject-bower', 'inject-css', 'scripts:watch', 'sass:watch']); 

Это должно быть все, что вам нужно.