Gulp Browser Sync问题：http://192.168.1.104:8080/无法正常访问

Hey there, let’s work through this issue together since you’re new to building WordPress themes with Underscores and Gulp. The loading error you’re seeing with BrowserSync, paired with the problematic node_modules directories, points to a few common fixes we can try right away:

The broken browser-sync, gulp, and gulp-sass folders in your gulp.dev/node_modules are almost certainly from a failed or interrupted initial install. Let’s reset them:

• First, delete the entire node_modules folder to wipe out corrupted files:

  # Mac/Linux
  rm -rf gulp.dev/node_modules
  
  # Windows (Command Prompt)
  rmdir /s /q gulp.dev\node_modules
  

• Next, delete the package-lock.json file (this clears cached dependency versions that might be causing conflicts):

  rm gulp.dev/package-lock.json
  

• Now navigate to your gulp.dev directory and reinstall all dependencies fresh:

  cd gulp.dev
  npm install
  

The endless loading error often happens when BrowserSync isn’t pointed to your actual WordPress site. Open your gulp.js file and locate the BrowserSync initialization block, then adjust it based on your local setup:

• If you’re using a local server like MAMP/WAMP/XAMPP (with a URL like localhost/your-underscores-theme), use the proxy option to point directly to your WordPress site:

  browserSync.init({
    proxy: "localhost/your-underscores-theme" // Replace with your local site URL
  });
  

• If you’re testing static files, set the server option to your theme’s root directory:

  browserSync.init({
    server: {
      baseDir: "./" // Update this to your theme's folder path if needed
    }
  });
  

• You can also switch to a different port (like 3000) to avoid conflicts with other apps using port 8080:

  browserSync.init({
    proxy: "localhost/your-underscores-theme",
    port: 3000
  });
  

• First, confirm your WordPress local server (Apache/Nginx) is running: Open your browser and visit your site’s direct local URL (e.g., localhost/your-underscores-theme). If this doesn’t load, fix your server first before troubleshooting Gulp.
• Check if port 8080 is being used by another program:

  # Mac/Linux
  lsof -i :8080
  
  # Windows (Command Prompt)
  netstat -ano | findstr :8080
  

If you see another process using the port, either kill that process or switch to a different port in your BrowserSync config (as shown above).

Make sure your Gulp task starts BrowserSync only after your Sass (and other assets) are compiled. A common mistake is launching BrowserSync before assets are ready, which can cause loading issues. Here’s an example of a properly structured task:

gulp.task('serve', gulp.series('sass', function() {
  // Initialize BrowserSync after Sass compiles
  browserSync.init({
    proxy: "localhost/your-underscores-theme"
  });

  // Watch for file changes to auto-reload
  gulp.watch('scss/**/*.scss', gulp.series('sass'));
  gulp.watch('**/*.php').on('change', browserSync.reload);
}));

Try running gulp serve (if this is your task name) instead of just gulp to ensure the correct workflow runs.

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