Gulp 观看任务提早完成

Question

我有一个 gulp 文件运行和 Sass 并在单独的任务中注入我的 CSS、应用程序和 Bower js 文件。我想在任务结束时查看我的 SCSS 文件和运行 Sass 的变化，以及应用程序代码并注入新文件（以期在我可以让它工作）。

不幸的是，我运行遇到了一个问题，我的监视任务提前结束，因此没有监视任何更改。

我在另一个中读到必须返回 watch 任务，但是，这没有帮助...

这是我的gulp文件（删除了产品任务）

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

正如您可能从注释掉的代码中看到的那样，我也尝试过运行直接在默认任务中查看这些内容。

这是运行ning 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

好吧，在您的 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']);

这就是您所需要的。

Answer 2

通过运行我在主监视任务中的监视任务解决了这个问题：

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

Gulp 观看任务提早完成

Gulp Watch tasks finishing early

gulp

gulp-watch