Gulp Watch任務早期完成

Question

我有一個運行Sass並將我的CSS，應用程序和Bower js文件注入單獨任務的gulp文件。我希望在任務結束時觀看我的SCSS文件並在更改和應用程序代碼上運行Sass，並注入新文件（以便在我能夠正常工作時重新加載）。

不幸的是，我遇到了一個問題，即我的手錶任務提前結束，因此沒有更改正在被監視。

我讀過的另一question手錶任務都被退回，但是，這並沒有幫助...

這是我gulpfile（帶刺的任務刪除）

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

運行的主要任務看裏面我的收藏任務解決了這個問題：

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

這應該是你所需要的。