Gulp -多个html文件-如何在localhost：3000中显示选中的一个？

epfja78i 于 2022-12-08 发布在 Gulp

关注(0)|答案(3)|浏览(142)

我的问题是：我有一个项目，其中有几个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']);

是不是我应该把这些HTML文件放在浏览器中呢？我不想改变太多文件的结构。

gulp

来源：https://stackoverflow.com/questions/46624030/gulp-multiple-html-files-how-to-display-a-chosen-one-in-localhost3000

3条答案

按热度按时间

syqv5f0l1#

尝试添加“索引”：“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（）的全部意义。然后是另一个类似于“serve”的大口任务，但它使用了browserSync2和“index”：“yourOtherPage”。

赞(0）回复(0）举报 2022-12-08

py49o6xq2#

我设法有一些结果的基础上：Browsersync not reloading all pages
基于这一点，我改变了我的一饮而尽：

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

赞(0）回复(0）举报 2022-12-08

qhhrdooz3#

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

赞(0）回复(0）举报 2022-12-08