Gulp监视不监视文件更改 [英] Gulp watch not watching file changes
问题描述
我的gulp-watch任务已正常启动，并且gulp命令也没有退出，每个命令似乎都很好.但是，当我对文件进行更改时，我看不到输出文件中的更改，并且命令行中未记录任何内容.似乎gulp无法检测到我的文件已更改.但是，仅运行受监视的任务将起作用.
它很奇怪.我的watch任务之前运行良好.但是我不记得上次右跑后我做了什么.
My gulp-watch task has been started normally, and the gulp command didn't exit too, every seems good. However, when I make changes to my files, I can't see the changes in my output files, and there was nothing logged in the command line. It seems like gulp can't detect that my files was changed. But running the watched tasks alone will work.
It is strange. My watch task was working perfectly before. But I can't remember what did I do after the last right run.
这是我的目录结构(一部分):
Here is my 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
这是我的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();
});
需要您的帮助...
推荐答案
我已经自行解决了此问题.问题是我在任务处理程序中声明了done参数，但没有调用它.因此，这些任务将无法完成，并且watch任务将无法工作，直到所有先前的任务都将起作用. (我猜是不参考文档).
I have solved this on my self. The problem is that I declared the done argument to my task handler, but I didn't call it. Because of this, the tasks won't finish, and the watch task will not work until all previous tasks will work. (I guess without referring to the documents).
在我的gulpfile.js出现问题的情况下，gulp命令行如下所示:
With my gulpfile.js in the question, the gulp command line will looks like 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
查看旧的gulpfile.js，在sass任务中调用了done回调，但在templates和scripts任务中未调用.因此，只有sass任务完成了，我们看不到templates和scripts的完成消息.
Look at the old gulpfile.js, the done callback was called in the sass task, but was not called in the templates and scripts task. So only the sass task was finished, and we cannot see the finish message of templates and 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命令输出以下内容:
This time the 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
在13:58:20，所有任务都已开始.当我在所有任务中调用done回调时，所有这些操作都在一秒钟内完成.然后，在14:02:22，我修改了index.jade文件，并且templates任务立即开始并完成.
At 13:58:20, all the tasks were started. And all of them were finished in a second, as I called the done callback in all tasks. Then, on 14:02:22, I modified my index.jade file and the templates task started and finished immediately.
结论:
-
如果遇到
gulp-watch任务无法监视没有输出的更改的问题，则可以检查命令行输出以确保所有先前的任务均已完成.gulp-watch在所有先前的任务完成之前将无法工作.
If you encountered the problem that your
gulp-watchtask doesn't watch your changes with no outputs, you may check your command line outputs to ensure that all the previous tasks were finished.gulp-watchwill not work until all the previous tasks were finished.
如果任务没有按预期完成，则可以在gulpfile.js中检查任务处理程序功能.确保该函数不带参数.如果使用任何参数，则第一个参数将被视为回调函数，并且直到您调用该回调函数，该任务才会结束.这意味着您的任务声明应类似于以下三种形式之一:
If a task doesn't finish as you expected, you can check your task handler funtion in gulpfile.js. Make sure that the function takes no argument. If it takes any argument, the first argument will be regarded as the callback function, and the task will not end until you call the callback. That means your task declaration should looks like one of the following 3 forms:
没有参数:
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
});
这篇关于Gulp监视不监视文件更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
