2016-06-06 2 views
2

gulp-watch 작업이 정상적으로 시작되었고 gulp 명령도 종료되지 않았습니다. 모두 훌륭하게 보입니다. 그러나 파일을 변경하면 출력 파일의 변경 사항을 볼 수 없으며 명령 줄에 아무것도 기록되지 않습니다. 꿀꺽 꿀꺽 소리가 내 파일이 변경된 것을 감지 할 수없는 것 같습니다. 그러나 감시 된 작업 만 실행하면됩니다. 이상합니다. 내 watch 작업이 완벽하게 작동했습니다. 그러나 마지막 오른쪽 실행 후 내가 무엇을했는지 기억이 안납니다. 여기 걸프 시계가 파일 변경 내용을 보지 못함

내 디렉토리 구조 (의 일부)입니다 : 여기
├── README.md 
├── bower.json 
├── config.xml 
├── gulpfile.js 
├── ionic.project 
├── src 
│   ├── jade 
│   │   ├── index.jade 
│   │   └── templates/ 
│   ├── js 
│   │   ├── app.js 
│   │   ├── modules/ 
│   │   └── services/ 
│   └── scss 
│    └── ionic.app.scss 
└── www 
    ├── README.md 
    ├── css 
    │   ├── ionic.app.css 
    │   ├── ionic.app.min.css 
    │   └── style.css 
    ├── index.html 
    ├── js 
    │   └── app.js 
    └── templates 
     ├── about.html 
     ├── home.html 
     ├── tabs.html 
     └── test.html 

가 내 gulpfile.js : 내가 이걸 해결 한

var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var bower = require('bower'); 
var concat = require('gulp-concat'); 
var sass = require('gulp-sass'); 
var minifyCss = require('gulp-minify-css'); 
var rename = require('gulp-rename'); 
var jade = require('gulp-jade'); 
var sh = require('shelljs'); 
var browserify = require('browserify'); 
var source = require('vinyl-source-stream'); 

var paths = { 
    sass: ['./src/scss/**/*.scss'], 
    jade: ['./src/jade/**/*.jade'], 
    js: ['./src/js/**/*.js'] 
}; 

gulp.task('default', ['sass', 'templates', 'scripts', 'watch']); 

gulp.task('sass', function(done) { 
    gulp.src('./src/scss/ionic.app.scss') 
    .pipe(sass()) 
    .on('error', sass.logError) 
    .pipe(gulp.dest('./www/css/')) 
    .pipe(minifyCss({ 
     keepSpecialComments: 0 
    })) 
    .pipe(rename({ extname: '.min.css' })) 
    .pipe(gulp.dest('./www/css/')) 
    .on('end', done); 
}); 

gulp.task('templates', function (done) { 
    gulp.src('./src/jade/**/*.jade') 
    .pipe(jade({ 
     pretty: true 
    })) 
    .pipe(gulp.dest('./www/')); 
}); 

gulp.task('scripts', function (done) { 
    var bundleStream = browserify('./src/js/app.js').bundle(); 
    bundleStream 
    .pipe(source('app.js')) 
    .pipe(rename('app.js')) 
    .pipe(gulp.dest('./www/js/')); 
}); 

gulp.task('watch', function() { 
    gulp.watch(paths.sass, ['sass']); 
    gulp.watch(paths.jade, ['templates']); 
    gulp.watch('./src/js/app.js', ['scripts']); 
}); 

gulp.task('install', ['git-check'], function() { 
    return bower.commands.install() 
    .on('log', function(data) { 
     gutil.log('bower', gutil.colors.cyan(data.id), data.message); 
    }); 
}); 

gulp.task('git-check', function(done) { 
    if (!sh.which('git')) { 
    console.log(
     ' ' + gutil.colors.red('Git is not installed.'), 
     '\n Git, the version control system, is required to download Ionic.', 
     '\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.', 
     '\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.' 
    ); 
    process.exit(1); 
    } 
    done(); 
}); 

당신의 도움이 필요 ...

답변

0

내 본인. 문제는 내 작업 처리기에 대한 done 인수를 선언했지만 호출하지 않은 것입니다. 이 때문에 작업이 완료되지 않고 이전 작업이 모두 완료 될 때까지 watch 작업이 작동하지 않습니다. (나는 문서를 언급하지 않고 추측한다). 질문에 내 gulpfile.js


gulp 명령 줄의 뜻은 다음과 같습니다 : 이전 gulpfile.js에서

cosmozhang:bowuguan $ gulp 
[13:44:36] Using gulpfile ~/work/cordova/bowuguan/gulpfile.js 
[13:44:36] Starting 'sass'... 
[13:44:36] Starting 'templates'... 
[13:44:36] Starting 'scripts'... 
[13:44:36] Starting 'watch'... 
[13:44:36] Finished 'watch' after 16 ms 
[13:44:36] Finished 'sass' after 801 ms 

찾는 위치는 done 콜백이 sass 작업에서 호출되었지만 호출되지 않은 templatesscripts 작업 따라서 sass 작업 만 완료되어 templatesscripts이라는 완료 메시지를 볼 수 없습니다.

var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var bower = require('bower'); 
var concat = require('gulp-concat'); 
var sass = require('gulp-sass'); 
var minifyCss = require('gulp-minify-css'); 
var rename = require('gulp-rename'); 
var jade = require('gulp-jade'); 
var sh = require('shelljs'); 
var browserify = require('browserify'); 
var source = require('vinyl-source-stream'); 

var paths = { 
    sass: ['./src/scss/**/*.scss'], 
    jade: ['./src/jade/**/*.jade'], 
    js: ['./src/js/**/*.js'] 
}; 

gulp.task('default', ['sass', 'templates', 'scripts', 'watch']); 

gulp.task('sass', function(done) { 
    gulp.src('./src/scss/ionic.app.scss') 
    .pipe(sass()) 
    .on('error', sass.logError) 
    .pipe(gulp.dest('./www/css/')) 
    .pipe(minifyCss({ 
     keepSpecialComments: 0 
    })) 
    .pipe(rename({ extname: '.min.css' })) 
    .pipe(gulp.dest('./www/css/')) 
    .on('end', done); 
}); 

gulp.task('templates', function (done) { 
    gulp.src('./src/jade/**/*.jade') 
    .pipe(jade({ 
     pretty: true 
    })) 
    .pipe(gulp.dest('./www/')) 
    .on('end', done); 
}); 

gulp.task('scripts', function (done) { 
    var bundleStream = browserify('./src/js/app.js').bundle(); 
    bundleStream 
    .pipe(source('app.js')) 
    .pipe(rename('app.js')) 
    .pipe(gulp.dest('./www/js/')) 
    .on('end', done); 
}); 

gulp.task('watch', function() { 
    gulp.watch(paths.sass, ['sass']); 
    gulp.watch(paths.jade, ['templates']); 
    gulp.watch('./src/js/app.js', ['scripts']); 
}); 

gulp.task('install', ['git-check'], function() { 
    return bower.commands.install() 
    .on('log', function(data) { 
     gutil.log('bower', gutil.colors.cyan(data.id), data.message); 
    }); 
}); 

gulp.task('git-check', function(done) { 
    if (!sh.which('git')) { 
    console.log(
     ' ' + gutil.colors.red('Git is not installed.'), 
     '\n Git, the version control system, is required to download Ionic.', 
     '\n Download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.', 
     '\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.' 
    ); 
    process.exit(1); 
    } 
    done(); 
}); 

이 시간 gulp 명령 출력이 :이 같은 gulpfile.js 내 새와 지금


13시 58분 20초에서

cosmozhang:bowuguan $ gulp 
[13:58:20] Using gulpfile ~/work/cordova/bowuguan/gulpfile.js 
[13:58:20] Starting 'sass'... 
[13:58:20] Starting 'templates'... 
[13:58:20] Starting 'scripts'... 
[13:58:20] Starting 'watch'... 
[13:58:20] Finished 'watch' after 18 ms 
[13:58:20] Finished 'templates' after 135 ms 
[13:58:20] Finished 'scripts' after 170 ms 
[13:58:21] Finished 'sass' after 778 ms 
[13:58:21] Starting 'default'... 
[13:58:21] Finished 'default' after 4.06 μs 
[14:02:22] Starting 'templates'... 
[14:02:22] Finished 'templates' after 75 ms 

는 모든 작업이 시작되었다. 그리고 나는 모든 작업에서 done 콜백을 호출하여 모든 것이 잠시 완료되었습니다. 그런 다음 14시 2 분 22 초에 index.jade 파일을 수정하고 즉시 templates 작업을 시작하고 완료했습니다.


결론 : 당신이 당신의 gulp-watch 작업없이 출력을 변경 사항을보고하지 않는 문제가 발생하는 경우

  1. , 당신은 이전의 모든 작업이되었는지 확인하기 위해 명령 줄 출력을 체크 할 수있다 끝마친. gulp-watch은 이전의 모든 작업이 완료 될 때까지 작동하지 않습니다.

  2. 예상대로 작업이 완료되지 않으면 gulpfile.js에서 작업 처리 기능을 확인할 수 있습니다. 함수에 인수가 없는지 확인하십시오.인수를 취하면 첫 번째 인수는 콜백 함수로 간주되어 콜백을 호출 할 때까지 작업이 종료되지 않습니다.

    없음 인수 : 인수가

    gulp.task('templates', function() { // takes no argument 
        ... 
    }); 
    

    : 인수가

    gulp.task('templates', function (done) { // takes a argument 
        ... 
        done(); // call the callback 
    }); 
    

    :

    gulp.task('templates', function (done) { // takes a argument 
        ... 
        gulp 
         ... 
         .on('end', done); // set the callback argument as gulp's end callback 
    }); 
    
그것은 당신의 작업을 선언해야 다음 세 형태 중 하나처럼 보이는 의미
관련 문제