Schluckuhr nicht Dateiänderungen beobachten

Question

Meine gulp-watch Aufgabe wurde normal gestartet, und der gulp Befehl wurde nicht beendet, jeder scheint gut. Wenn ich jedoch Änderungen an meinen Dateien vornimmt, kann ich die Änderungen in meinen Ausgabedateien nicht sehen, und in der Befehlszeile wurde nichts protokolliert. Es scheint, als ob Schluck nicht erkennen kann, dass meine Dateien geändert wurden. Aber das Ausführen der überwachten Aufgaben wird funktionieren. Es ist seltsam. Meine watch Aufgabe funktionierte perfekt vorher. Aber ich kann mich nicht erinnern, was ich nach dem letzten richtigen Lauf getan habe.

Hier ist meine Verzeichnisstruktur (ein Teil davon):

├── 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 

Hier ist meine 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(); 
}); 

brauchen Ihre Hilfe ...

Answer 1

ich dieses Problem gelöst haben auf meinem selbst. Das Problem ist, dass ich das done Argument zu meinem Aufgabenhandler erklärte, aber ich nannte es nicht. Aus diesem Grund werden die Aufgaben nicht abgeschlossen und die watch Aufgabe wird nicht funktionieren, bis alle vorherigen Aufgaben funktionieren. (Ich denke, ohne auf die Dokumente zu verweisen).

---

Mit meinem gulpfile.js in der Frage, die gulp Befehlszeile sieht wie folgt aus:

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 

Blick auf den alten gulpfile.js, der done Rückruf in der sass Task aufgerufen wurde, wurde aber nicht genannt in der templates und scripts Aufgabe. Also nur die sass Aufgabe wurde beendet, und wir können die Fertigmeldung von templates und scripts nicht sehen.

---

nun mit meinem neuen gulpfile.js wie folgt aus:

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(); 
}); 

Dieses Mal sind die gulp Befehl gibt diese:

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 

Am 13.58.20, alle Aufgaben wurden gestartet. Und alle von ihnen waren in einer Sekunde fertig, wie ich in allen Aufgaben den done Rückruf nannte. Dann, am 14.02.22, änderte ich meine index.jade Datei und die templates Aufgabe begann und endete sofort.

---

Fazit:

1. Wenn Sie das Problem, dass Ihre gulp-watch Aufgabe sehen nicht ohne Ausgänge Änderungen auftreten, können Sie Ihre Befehlszeile Ausgänge überprüfen, um sicherzustellen, dass alle bisherigen Aufgaben waren fertig. gulp-watch wird nicht funktionieren, bis alle vorherigen Aufgaben abgeschlossen wurden.

2. Wenn eine Aufgabe nicht wie erwartet abgeschlossen wird, können Sie die Aufgabenhandlerfunktion in gulpfile.js überprüfen. Stellen Sie sicher, dass die Funktion kein Argument benötigt.Wenn ein Argument benötigt wird, wird das erste Argument als Callback-Funktion betrachtet, und die Task wird erst beendet, wenn Sie den Callback aufrufen. Das heißt, Ihre Aufgabe Erklärung sollte wie eine der folgenden drei Formen aussieht:

   Kein Argument:

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

   Mit Argumenten:

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

   Mit Argumenten:

   gulp.task('templates', function (done) { // takes a argument 
       ... 
       gulp 
        ... 
        .on('end', done); // set the callback argument as gulp's end callback 
   });