2016-06-06 3 views
2

Моя задача gulp-watch была начата нормально, и команда 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 командная строка будет выглядит следующим образом:

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 

Посмотрите на старом gulpfile.js, то done обратного вызова был вызван в sass задачи, но не был вызван в задаче templates и scripts. Таким образом, была завершена задача sass, и мы не можем видеть сообщение финиша templates и scripts.


Теперь с моим новым 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/')) 
    .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 команда выводит это:

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 

В 13:58:20, были запущены все задачи. И все они были закончены через секунду, так как я назвал обратный вызов done во всех задачах. Затем, в 14:02:22, я изменил файл index.jade, и задача templates началась и завершилась немедленно.


Вывод:

  1. Если вы столкнулись с проблемой, что ваша gulp-watch задача не смотреть изменения без каких-либо результатов, вы можете проверить свои выходы из командной строки, чтобы гарантировать, что все предыдущие задачи были законченный. gulp-watch не будет работать, пока все предыдущие задачи не будут завершены.

  2. Если задача не завершена так, как вы ожидали, вы можете проверить функционирование обработчика задач в gulpfile.js. Убедитесь, что функция не принимает аргументов.Если он принимает какой-либо аргумент, первый аргумент будет рассматриваться как функция обратного вызова, и задача не закончится, пока вы не вызовете обратный вызов. Это означает, что ваше объявление задачи должно выглядеть как один из следующих 3-й форм:

    Нет аргументов:

    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 
    }); 
    
Смежные вопросы