Gulp Watch 작업 완료가 일찍 완료합니다.

Question

나는 Sass를 실행하고 CSS, app 및 Bower js 파일을 별도의 작업에 주입하는 꿀꺽 꿀꺽한 파일을 가지고 있습니다. 작업이 끝나면 SCSS 파일을보고 변경 및 응용 프로그램 코드를 실행하고 새 파일을 주입합니다 (이 작업을 수행 할 수있을 때 livereload를 볼 수 있음).

불행히도 시계 작업이 일찍 끝나는 문제가 발생하여 변경 사항을 보지 못했습니다.

나는 시계 작업은, 그러나,이 도움이되지 않았다 반환하는 것을 또 다른 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을 말합니다.하지만 config 오브젝트의 위치는 없습니다. 아마도 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']); 

이 모두가 필요합니다.