代码之家 › 专栏 › 技术社区 › bakrall

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

browser-sync gulp html

bakrall · 技术社区 · 8 年前

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

这是我的袋装文件。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,我应该大吃一惊吗?我不想改变太多的文件结构。

3 回复 | 直到 8 年前

Mark 8 年前

尝试将“index”:“home.html”添加到browserSync选项中,例如:

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()的全部要点。然后是另一个吞咽任务,就像你的“发球”一样,但它使用browserSync2和“索引”:“yourOtherPage”。

bakrall 8 年前

我基于以下方面得出了一些结果: 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