Gulp 4拆分gulpfile.js为多文件时出现栈溢出问题求助

Hey there! Let's break down why you're hitting this stack overflow error and how to fix it.

The Root Cause #

The issue is a naming conflict + accidental recursion in your watch.js file. You've defined a function named watch(), and inside that function, you're calling watch('./app/index.html', browserSyncReload); — this isn't calling Gulp's built-in watch function, it's calling your own watch() function over and over again, creating an infinite loop that blows up the call stack.

On top of that, there are a couple of small issues with how you're handling task completion signals (the cb() calls) and the order of your tasks.

Step-by-Step Fixes #

1. Update styles.js (Clean Up Task Completion)

For tasks that return a Gulp stream, you don't need to call cb() — Gulp automatically detects when the stream finishes. Remove the unnecessary callback code:

var gulp = require('gulp'),
postcss = require('gulp-postcss'),
autoprefixer = require('autoprefixer'),
cssvars = require('postcss-simple-vars'),
nested = require('postcss-nested'),
cssImport = require('postcss-import');

function styles() {
  return gulp.src('./app/assets/styles/styles.css')
    .pipe(postcss([cssImport, cssvars, nested, autoprefixer]))
    .pipe(gulp.dest('./app/temp/styles'));
  // Removed cb() — no longer needed
}

exports.styles = styles;

2. Fix watch.js (Stop Recursion + Correct Task Order)

• Use gulp.watch explicitly (not just watch) to avoid calling your own function recursively.
• Fix the task order: you need to compile styles before injecting them into the browser (your original order was reversed).
• Clean up unnecessary cb() calls for stream-based tasks, and import the styles task so it's available in this file.

var gulp = require('gulp'),
browserSync = require('browser-sync').create();

// Import the styles task to use in our watch callback
var stylesTasks = require('./styles.js');
const styles = stylesTasks.styles;

function cssInject() {
  return gulp.src('./app/temp/styles/styles.css')
    .pipe(browserSync.stream());
  // Removed cb() — stream return handles completion
}

function browserSyncReload(cb) {
  browserSync.reload();
  cb(); // This is okay — no stream to return, so we use cb to signal completion
}

function watch() {
  browserSync.init({
    notify: false,
    server: { baseDir: "app" }
  });
  // Use gulp.watch explicitly to avoid recursion
  gulp.watch('./app/index.html', browserSyncReload);
  // Correct order: first compile styles, then inject the updated CSS
  gulp.watch('./app/assets/styles/styles.css', gulp.series(styles, cssInject));
}

exports.browserSyncReload = browserSyncReload;
exports.watch = watch;

3. Verify gulpfile.js (No Changes Needed Here)

Your main gulpfile.js is already set up correctly to import and export the tasks, so no tweaks are needed there.

Why This Works #

• No more recursion: By using gulp.watch, you're telling Gulp to listen for file changes instead of calling your own watch() function repeatedly.
• Correct task flow: Compiling styles first ensures the injected CSS is always the latest version.
• Proper task completion: Removing redundant cb() calls prevents conflicting signals to Gulp about when tasks finish.

Give these changes a try, then run gulp watch — the stack overflow error should be gone, and your watch task should work as expected!

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