Question

我有这样的目录结构......

--app
 -css
  custom.css
 -sass
  custom.scss
 -pages
  about.html
  home.html
--gulpfile.js
--node_modules
--package.json

我的gulp文件是

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

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

gulp.task('watch', ['browserSync', 'sass'], function () {
    gulp.watch('app/sass/*.scss', ['sass']);
    gulp.watch('app/pages/*.html', browserSync.reload);
    gulp.watch('app/js/**/*.js', browserSync.reload);
})

gulp.task('browserSync', function () {
    browserSync.init({           
        server: {
            baseDir: "app",
            index: "pages/home.html"
        },
        })
})

当我运行监视任务时，我被重定向到localhost：3000，打开我的home.html页面。我的浏览器同步工作正常。

但是当我右键单击about.html文件并在visual studio中的浏览器中查看时，浏览器同步在about.html页面中无法正常工作。此页面在浏览器中以localhost：56060 / app / pages / about.html打开。

如何让浏览器同步在页面目录中的所有html文件中运行？

或访问about.html文件的浏览器的url地址应该是什么？

Answer 1

您的代码看起来不错，请尝试使用浏览器＆＃34; chrome＆＃34;在您的CMD控制台命令 gulp watch 被激活时，过去网址地址

http://localhost:3000/pages/about.html

请记住，如果您激活了browserSync，它会在文件夹 app 中启动，这是您的localhost：3000服务器，类似localhost：56060，它不是您的页面。

在你的html文件中不要忘记在css链接中添加＆＃34; /＆＃34;在css文件夹之前。

 <link rel="stylesheet" href="/css/custom.css">

如果您仍有问题，请在gulp任务监视中尝试此代码：

gulp.task('watch', ['browserSync', 'sass'], function () {
    gulp.watch('app/sass/*.scss', ['sass']);
    // gulp.watch('app/pages/*.html', browserSync.reload); // Comment this line 
    gulp.watch("app/**/*.html").on('change', browserSync.reload); // Try this line
    gulp.watch('app/js/**/*.js', browserSync.reload);
})

gulp.task('browserSync', function () {
    browserSync.init({           
        server: {
            baseDir: "app",
            index: "pages/home.html"
        },
        })
})

问候：）

如何使用gulp browsersync同步所有html文件？

1 个答案: