我有一个非常温和的应用程序gulpfile。我刚刚将 Gulp 从升级v3.9.1到v4.0.2并调整了gulpfile.js. 所有任务都再次正常工作，只有watching 不是。
没有错误，但 Gulp watch 似乎没有检查定义的文件是否有更改：
$ gulp -v
CLI version: 2.2.0
Local version: 4.0.2
$ gulp
[11:39:34] Using gulpfile /var/www/.../my-app/gulpfile.js
[11:39:34] Starting 'default'...
[11:39:34] Starting 'run'...
[11:39:34] Starting 'build-less'...
[11:39:34] Finished 'build-less' after 16 ms
[11:39:34] Starting 'build-vendors'...
[11:39:34] Finished 'build-vendors' after 5.5 ms
[11:39:34] Finished 'run' after 23 ms
[11:39:34] Starting 'watch-files'...
[11:39:34] Starting 'watchFiles'...
如何让 Gulp watch 为 Gulp v4 工作？
这是我gulpfile.js的 Gulp原件v3：
/**
* Gulp File
*
* run `gulp run && gulp watch-files` on the command line
*/
// Include Gulp plugins
var gulp = require('gulp'),
less = require('gulp-less'),
watch = require('gulp-watch'),
prefix = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
filter = require('gulp-filter'),
rename = require('gulp-rename'),
path = require('path')
;
// Compile LESS to CSS
gulp.task('build-less', function() {
const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
gulp.src('./public/less/*.less') // path to less file
.pipe(fileFilter)
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('./public/css/')) // path to css directory
;
});
// Get vendors' code
gulp.task('build-vendors', function() {
gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
.pipe(plumber())
.pipe(less())
.pipe(rename(function (path) {
//rename all files except 'bootstrap.css'
if (path.basename + path.extname !== 'bootstrap.css') {
path.basename = 'bootstrap-' + path.basename;
}
}))
.pipe(gulp.dest('./public/css')) // path to css directory
;
});
// Run the build process
gulp.task('run', ['build-less', 'build-vendors']);
// Watch all LESS files, then run build-less
gulp.task('watch', function() {
gulp.watch('public/less/*.less', ['run'])
});
// Default will run the 'entry' task
gulp.task('default', ['watch', 'run']);
这是 Gulp 的新变体v4：
/**
* Gulp File
*
* run `gulp run && gulp watch-files` on the command line
*/
// Include Gulp plugins
var gulp = require('gulp'),
less = require('gulp-less'),
watch = require('gulp-watch'),
prefix = require('gulp-autoprefixer'),
plumber = require('gulp-plumber'),
filter = require('gulp-filter'),
rename = require('gulp-rename'),
path = require('path')
;
// Compile LESS to CSS
function buildLess(done) {
const fileFilter = filter(['**/*', '!**/mixins.less', '!**/variables.less']);
gulp.src('./public/less/*.less') // path to less file
.pipe(fileFilter)
.pipe(plumber())
.pipe(less())
.pipe(gulp.dest('./public/css/')) // path to css directory
;
done();
};
// Get vendors' code
function buildVendors(done) {
gulp.src(['./public/components/bootstrap/less/theme.less', './public/components/bootstrap/less/bootstrap.less']) // path to less file
.pipe(plumber())
.pipe(less())
.pipe(rename(function (path) {
//rename all files except 'bootstrap.css'
if (path.basename + path.extname !== 'bootstrap.css') {
path.basename = 'bootstrap-' + path.basename;
}
}))
.pipe(gulp.dest('./public/css')) // path to css directory
;
done();
};
// Watch all LESS files, then run build-less
function watchFiles() {
return gulp.watch(['public/less/*.less'], gulp.series('build-less'));
};
gulp.task('build-less', buildLess);
gulp.task('build-vendors', buildVendors);
gulp.task('run', gulp.series('build-less', 'build-vendors'));
gulp.task('watch-files', gulp.series(watchFiles));
gulp.task('default', gulp.series('run', 'watch-files'));
