Gulp Watch首次执行后不再监听文件变更问题求助

Hey there, let's troubleshoot why your gulp watch isn't picking up Sass file changes until you restart it. This is a super common issue, and it almost always boils down to small oversights in how your tasks are configured or linked together.

Common Culprits & Fixes #

1. You're Not Returning the Stream in Your Tasks

Gulp relies on streams to track when tasks finish. If your Sass compilation task doesn't return the stream, Gulp can't confirm the task completed properly—and that breaks the watch trigger loop.

Bad (missing return):

gulp.task('sass', function() {
  gulp.src('src/sass/*.scss')
    .pipe(sass())
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
});

Good (with return and error handling):

gulp.task('sass', function() {
  return gulp.src('src/sass/**/*.scss') // Return the stream so Gulp tracks it
    .pipe(sass().on('error', sass.logError)) // Catch errors to avoid watch crashing
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 2 versions'],
      cascade: false
    }))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
});

2. Your Watch Path Is Too Restrictive

If you're only watching src/sass/*.scss, it won't pick up changes in subfolders (like src/sass/partials/). Use the ** glob pattern to watch all nested files and folders.

Bad (only watches root Sass files):

gulp.watch('src/sass/*.scss', ['sass']);

Good (works for Gulp 4):

gulp.watch('src/sass/**/*.scss', gulp.series('sass')); // Watches all .scss files in subfolders

Note: If you're on Gulp 3, you can keep the array syntax (['sass']), but Gulp 4 requires gulp.series() or gulp.parallel() to run tasks in order/parallel.

3. Your Watch Task Isn't Properly Linked to Compilation

Make sure your watch task is explicitly set to trigger the correct Sass task every time a file changes. Here's a complete watch task example:

gulp.task('watch', function() {
  // Trigger Sass compilation on any .scss change
  gulp.watch('src/sass/**/*.scss', gulp.series('sass'));
  // Optional: Add watches for JS/images if you need them
  gulp.watch('src/js/**/*.js', gulp.series('js'));
  gulp.watch('src/images/**/*', gulp.series('imagemin'));
});

Full Working Gulpfile Example #

Putting it all together, here's a corrected version of your gulpfile with all fixes included:

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass');
const cssnano = require('gulp-cssnano');
const autoprefixer = require('gulp-autoprefixer');
const imagemin = require('gulp-imagemin');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');

// Compile Sass to minified, prefixed CSS
gulp.task('sass', function() {
  return gulp.src('src/sass/**/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(autoprefixer({
      overrideBrowserslist: ['last 2 versions'],
      cascade: false
    }))
    .pipe(cssnano())
    .pipe(gulp.dest('dist/css'));
});

// Minify images
gulp.task('imagemin', function() {
  return gulp.src('src/images/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('dist/images'));
});

// Concatenate & minify JS
gulp.task('js', function() {
  return gulp.src('src/js/**/*.js')
    .pipe(concat('all.min.js'))
    .pipe(uglify())
    .pipe(gulp.dest('dist/js'));
});

// Watch for file changes
gulp.task('watch', function() {
  gulp.watch('src/sass/**/*.scss', gulp.series('sass'));
  gulp.watch('src/js/**/*.js', gulp.series('js'));
  gulp.watch('src/images/**/*', gulp.series('imagemin'));
});

// Default task: Run all builds then start watch
gulp.task('default', gulp.series('sass', 'js', 'imagemin', 'watch'));

Final Quick Checks #

• Double-check that your file paths match exactly (e.g., src/sass exists and contains your .scss files)
• Run gulp --version to confirm you're using the right Gulp version (match syntax to your version)
• Test with gulp watch or just gulp if you set up the default task above

内容的提问来源于stack exchange，提问作者Eugene