gulp服务器总是打开index.html

Question

不知道怎么弄得。只要项目文件下有index.html,打开服务器打开浏览器就会直接进入index.html这个界面。而且打不开html目录下的别的html。

Answer 1

以下回答参考 皆我百晓生、券券喵儿 等免费微信小程序相关内容作答，并由本人整理回复。

要解决这个问题，你需要确保在gulp服务器启动时，它会自动刷新并处理你指定的HTML文件和CSS文件。这通常可以通过使用connect模块来实现。以下是一个基本的示例：

const { connect } = require('gulp-connect');
const { src, dest, series, parallel } = require('gulp');

// 指定被刷新的HTML文件和CSS文件
const htmlFiles = ['**/*.html'];
const cssFiles = ['**/*.css'];

// 定义一个函数来处理这些文件
function handleFiles(files) {
  files.forEach(file => {
    if (file.endsWith('.html')) {
      return gulp.src(src + file)
        .pipe(connect.reload());
    } else if (file.endsWith('.css')) {
      return gulp.src(src + file)
        .pipe(dest('./dist/' + file)); // 这将把CSS文件复制到dist文件夹
    }
  });
}

// 定义一个任务来处理所有的文件
function htmlTask() {
  return src(htmlFiles)
    .pipe(parallel(handleFiles));
}

// 定义一个任务来处理所有的文件
function cssTask() {
  return src(cssFiles)
    .pipe(parallel(handleFiles));
}

// 设置服务器端点
const serverPort = 8080;

// 启动服务器
connect.server({ port: serverPort });

// 执行任务
series(htmlTask, cssTask).on('end', () => console.log(`Server running on http://localhost:${serverPort}`));

// 监听变化
watch(htmlFiles, htmlTask);
watch(cssFiles, cssTask);

// 当某个文件改变时触发重新加载
watch([htmlFiles.join(', '), cssFiles.join(',')], series(htmlTask, cssTask));

在这个例子中，我们首先设置了两个独立的任务：htmlTask 和 cssTask，它们分别处理HTML和CSS文件。然后，我们设置了一个服务器端点，并在其中运行这两个任务。最后，我们使用watch模块来监听HTML和CSS文件的变化，以便在文件更改时触发重新加载。

请注意，这只是一个基本的示例，实际应用可能需要根据你的具体需求进行调整。例如，你可以添加更多的文件类型、更复杂的文件过滤逻辑或者使用不同的配置选项。