Gulp:设置浏览器同步和手表的问题

Question

我正在学习Gulp和NPM，并决定通过与我正在工作的PHP项目(使用XAMPP)使用Browser-Sync来测试自己。我知道浏览器同步不工作与PHP文件，但我想用它与我的。css文件(后来可能添加Sass)。

我安装了npm, Gulp, Gulp-watch和Browser Sync到我的项目根目录，一切看起来都很好。

然后我创建了一个gulp.js文件，如下所示:

var gulp = require('gulp'),
watch = require('gulp-watch'),
browserSync = require('browser-sync').create();
gulp.task('watch', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
    watch('css/*.css', function() {
        browserSync.reload();
    });
});

然而，当我gulp watch时，一个新的浏览器窗口打开，但只显示Cannot GET /错误。

同时，URL显示http://localhost:3002/而不是http://localhost:myproejct

我读到这可能与我的baseDir有关，所以尝试:

baseDir: ""
baseDir: "./"
baseDir: "../myproject"

有谁知道我做错了什么吗?

Answer 1

你做的比你想做的要多。你可以使用browsersync作为你的托管站点的代理层。

参见docs

中的以下示例

# Proxy a PHP app + serve static files & watch them
$ browser-sync start --proxy 'mylocal.dev' --serveStatic 'public' --files 'public'

我认为这是你需要的，从你的网站的物理根运行它，用你的php服务器地址替换mylocal.dev

npm install browser-sync -g
browser-sync start --proxy 'mylocal.dev' --serveStatic 'css' --files 'css/*.css'

Answer 2

你的代码对我来说很好。假设您的目标HTML文件可以在浏览器中手动打开:Cannot Get/错误的一个常见原因是使用了索引文件而不是Browsersync的默认期望index.html。这就是你的问题吗?如果需要自定义索引文件，可以设置index选项:

browserSync.init({
    server: {
        baseDir: 'mybasedirectorypath',
        index: 'notindex.html'
    }
});

当然，你也可以更有效地做到这一点，并节省安装gulp-watch的重量(这个例子改编和简化了这个Browsersync文档的例子):

var gulp = require('gulp'),
    browserSync = require('browser-sync').create();
gulp.task('watch', function() {
    browserSync.init({
        server: {
            baseDir: './'
        }
    });
    gulp.watch('css/*.css').on('change',browserSync.reload)
});

---

至于使用自定义url，请查看https://github.com/BrowserSync/browser-sync/issues/646，其中有一些解决方案