Gulp 看不看文件变化
Gulp watch not watching file changes
我的gulp-watch任务已经正常启动，gulp命令也没有退出，一切正常。但是，当我对文件进行更改时，我无法在输出文件中看到更改，并且命令行中也没有任何记录。 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();
});
需要你的帮助...
我自己解决了这个问题。问题是我向我的任务处理程序声明了 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 任务立即开始并完成。
结论：
如果您遇到 gulp-watch 任务没有观察您的更改且没有输出的问题，您可以检查命令行输出以确保之前的所有任务都已完成。 gulp-watch 在前面的所有任务都完成后才会工作。
如果任务没有按预期完成，您可以在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
});
我的gulp-watch任务已经正常启动，gulp命令也没有退出，一切正常。但是，当我对文件进行更改时，我无法在输出文件中看到更改，并且命令行中也没有任何记录。 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();
});
需要你的帮助...
我自己解决了这个问题。问题是我向我的任务处理程序声明了 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 任务立即开始并完成。
结论：
如果您遇到
gulp-watch任务没有观察您的更改且没有输出的问题，您可以检查命令行输出以确保之前的所有任务都已完成。gulp-watch在前面的所有任务都完成后才会工作。如果任务没有按预期完成，您可以在
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 });