my gulp-watch task has been started normally, , gulp command didn't exit too, every seems good. however, when make changes files, can't see changes in output files, , there nothing logged in command line. seems gulp can't detect files changed. running watched tasks alone work. strange. watch task working before. can't remember did after last right run.
here directory structure (part of it):
├── 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 here 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 not installed.'), '\n git, version control system, required download ionic.', '\n download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.', '\n once git installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.' ); process.exit(1); } done(); }); need help...
i have solved on self. problem declared done argument task handler, didn't call it. because of this, tasks won't finish, , watch task not work until previous tasks work. (i guess without referring documents).
with gulpfile.js in question, gulp command line looks following:
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 look @ old gulpfile.js, done callback called in sass task, not called in templates , scripts task. sass task finished, , cannot see finish message of templates , scripts.
now new gulpfile.js this:
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 not installed.'), '\n git, version control system, required download ionic.', '\n download git here:', gutil.colors.cyan('http://git-scm.com/downloads') + '.', '\n once git installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.' ); process.exit(1); } done(); }); this time gulp command outputs this:
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 at 13:58:20, tasks started. , of them finished in second, called done callback in tasks. then, on 14:02:22, modified index.jade file , templates task started , finished immediately.
conclusion:
if encountered problem
gulp-watchtask doesn't watch changes no outputs, may check command line outputs ensure previous tasks finished.gulp-watchnot work until previous tasks finished.if task doesn't finish expected, can check task handler funtion in
gulpfile.js. make sure function takes no argument. if takes argument, first argument regarded callback function, , task not end until call callback. means task declaration should looks 1 of following 3 forms:no argument:
gulp.task('templates', function () { // takes no argument ... });with arguments:
gulp.task('templates', function (done) { // takes argument ... done(); // call callback });with arguments:
gulp.task('templates', function (done) { // takes argument ... gulp ... .on('end', done); // set callback argument gulp's end callback });
