如何在Gulp构建中修改默认域名至site.com/test？求实现示例

Got it! Since you didn't share your exact Gulp config, I'll break down the two most common scenarios where you'd need to adjust this path—setting up your dev server to default to /test and updating asset reference paths for production.

1. 调整开发服务器（BrowserSync）的默认访问路径 #

Most Gulp projects use BrowserSync for live reloading, so this is the first place to tweak if you want your dev server to mirror the site.com/test structure locally. Here's a concrete setup:

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

gulp.task('serve', function() {
  browserSync.init({
    server: {
      baseDir: './dist', // 替换成你的项目输出目录
      // 把/test路径映射到你的项目根目录
      routes: {
        '/test': './dist'
      }
    },
    // 启动时自动打开/test路径
    startPath: '/test',
    // 如果是代理线上site.com的本地环境，用这段替代上面的server配置
    // proxy: 'site.com',
    // proxyMiddleware: function(app) {
    //   app.use('/test', express.static('./dist'));
    // }
  });
});

What this does: When you run gulp serve, your browser will open directly to http://localhost:3000/test, and all your project files will be served under that path—matching your desired site.com/test structure perfectly.

2. 更新静态资源的引用路径 #

If your HTML/CSS/JS files use absolute paths (like /styles.css), you'll need to update those to point to /test/styles.css so they load correctly on site.com/test. Use gulp-replace for this:

First, install the plugin if you don't have it:

npm install gulp-replace --save-dev

Then add these tasks to your Gulpfile:

const replace = require('gulp-replace');

// 更新HTML中的资源引用
gulp.task('update-html-paths', function() {
  return gulp.src('./src/**/*.html')
    // 替换所有根路径引用为/test路径
    .pipe(replace(/href="\/([^"]+)"/g, 'href="/test/$1"'))
    .pipe(replace(/src="\/([^"]+)"/g, 'src="/test/$1"'))
    // 替换域名级别的硬编码引用（如果有的话）
    .pipe(replace(/site.com\/([^"]+)"/g, 'site.com/test/$1"'))
    .pipe(gulp.dest('./dist'));
});

// 更新CSS中的背景图片/字体路径
gulp.task('update-css-paths', function() {
  return gulp.src('./src/**/*.css')
    .pipe(replace(/url\(['"]?\/([^'")]+)['"]?\)/g, 'url("/test/$1")'))
    .pipe(gulp.dest('./dist/css'));
});

// 把路径更新任务整合到你的构建流程
gulp.task('build', gulp.series('update-html-paths', 'update-css-paths', /* 其他你的构建任务 */));

Pro tip: If you're using plugins like gulp-useref or gulp-htmlmin, make sure to run the path-replacement tasks after those plugins process your files, or adjust their base configuration to account for the /test prefix.

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