Gulp

Question

我的问题是：我有一个项目，其中有几个 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？我不想改变文件的结构。

Answer 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"。

Answer 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

Answer 3

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

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

Gulp - 多个 html 文件 - 如何在 localhost:3000 中显示所选文件？

Gulp - multiple html files - how to display a chosen one in localhost:3000?

html

browser-sync