Gulp - 多个 html 文件 - 如何在 localhost:3000 中显示一个选定的文件？答案

【问题标题】：Gulp - multiple html files - how to display a chosen one in localhost:3000?Gulp - 多个 html 文件 - 如何在 localhost:3000 中显示一个选定的文件？
【发布时间】：2018-03-19 08:09:21
【问题描述】：

我的问题是：我有一个项目，其中有几个代表单独页面的 html 文件。我希望能够在 localhost:3000 地址下的浏览器中一次看到一页。工程文件结构如图所示：

我已经设置了一个 gulp 以在 localhost:3000 下显示 html。但是，我不知道如何在浏览器中分别查看每个页面。当我将它与“styles.scss”放在同一级别时，它只显示其中一个。

这是我的 gulpfile.js：

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

gulp.task('serve', ['sass'], function() {

    browserSync.init({
        server: "./app"
    });

    gulp.watch("app/**/*.scss", ['sass']);
    gulp.watch("app/*.html").on('change', browserSync.reload);
});

// Compile sass into CSS & auto-inject into browsers
gulp.task('sass', function() {
    return gulp.src("app/**/*.scss")
        .pipe(sass())
        .pipe(gulp.dest("app/css"))
        .pipe(browserSync.stream());
});

gulp.task('default', ['serve']);

我应该在 gulp 中放入一些东西以在浏览器中呈现这些 html 吗？我不想改变太多的文件结构。

【问题讨论】：

这个问题不应该是关于 Browsersync 的吗？ Gulp 只是一个自动化工具。
我认为你是对的。我没有考虑，因为他们两个对我来说都是新手。
在这种情况下，您的目的是在开发过程中快速测试 HTML 文件中的更改，还是将页面用作网站？如果是前者，那么你的方向是正确的；如果是后者，那么您可能想查看 Express。
好吧，它不一定是一个网站——我的意图是有可能写地址“localhost:3000/home”或“localhost:3000/subpage”并有相应的页面显示。
那么您正在寻找一个网络服务器。查看 Express，常用的 Node 服务器。

标签： html gulp browser-sync

【解决方案1】：

尝试将 "index": "home.html" 添加到您的浏览器同步选项中，例如：

gulp.task('serve', ['sass'], function() {

  browserSync.init({
    server: "./app",
    index: "home.html"
  });

  gulp.watch("app/**/*.scss", ['sass']);
  gulp.watch("app/*.html").on('change', browserSync.reload);
});

如果由于某种原因不起作用，您可以尝试：

server: {
  baseDir: "./pathtoYourDirectoryWithTheHTML",
  index: "home.html"
},

至于在 browserSync 的同一个运行实例中切换 html 页面，我不知道你能做到这一点。但是您可以通过以下方式启动另一个 browserSync 服务器：

var browserSync2 = require('browser-sync').create();

这就是 create() 的全部意义所在。然后是另一个 gulp 任务，就像你的“服务”，但它使用 browserSync2 和“index”：“yourOtherPage”。

【讨论】：

谢谢！你的建议帮助了我。当使用不同的 gulp 任务和 browsersyncs 时，我设法渲染了不同的页面。但是不知何故，gulp 自动停止刷新 html，我不得不手动刷新。但无论如何我已经渲染了页面:)
，非常感谢！我花了一段时间才有时间回到这个问题的项目上，但最终我成功了。我根据您的建议更改了文件，更改了文件夹的结构（我将所有 html 文件直接放在“app”文件夹下）并且效果很好！而且比我之前的实现要好得多。我还删除了“文件”，但更改仍会自动呈现。
所有都可以使用 browserSync 的一个实例 :)

【解决方案2】：

我设法得到了一些基于：Browsersync not reloading all pages

基于此，我将 gulp 更改为：

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

gulp.task('watch', function() {
    gulp.watch('app/**/*.scss', ['sass']);
    gulp.watch('app/**/*.html').on('change', browserSync.reload);
    browserSync.init({
      files: ['app/pages/home/home.html','app/pages/subpage/subpage.html'],
      server:{
        baseDir:'app',
        directory: true
      }
    });
});

gulp.task('sass', function() {
    return gulp.src('app/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('app/css'))
        .pipe(browserSync.stream());
});

作为效果，我可以通过更改 URL 中的地址来访问所有页面，例如：

http://localhost:3000/pages/subpage/subpage.html 要么 http://localhost:3000/pages/home/home.html

【讨论】：

很高兴您可以使用它，但文件选项仅用于查看文件更改。它与您在 localhost 下加载它们的能力没有任何关系。但是我的说法是错误的，您可能需要启动 browserSync 的另一个实例来提供另一个 html 页面。如果文件在同一个目录中，我可以愉快地使用我向您展示的原始代码在 html 页面之间来回切换。它只是使“索引”页面成为默认页面。但是它被“目录”覆盖：true - 这是你的关键。
您应该只知道不是“文件”选项使它适合您。但它应该监视那些文件以进行您可能想要的更改。
如果每个文件都有不同的父文件夹，你认为我的文件在同一个目录下吗？例如：pages/home/home.html、pages/subpage/subpage.html？跨度>
不，我应该说“在同一个文件夹中”。最直接的父目录。我的原始代码工作得很好，它加载 'home.html' 作为默认值 [localhost:3000/] ，但您可以在其末尾添加 'another.html' 以转到另一个文件。

【解决方案3】：

对于拥有多个 HTML 文件的任何人，您希望在本地服务器上提供服务，例如http://localhost:3000/blog.

别忘了试试http://localhost:3000/blog.html。

【讨论】：