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

这应该是你所需要的。