Gulp:设置browserSync和手表时出错

Question

我正在学习Gulp和NPM，并决定使用Browser-Sync与我正在开发的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

你所做的远远超过了做你想做的事所必需的。您只需将浏览器同步用作托管站点顶部的代理层。

请参阅文档中的以下示例

# 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'
    }
});

Fwiw，您还可以更有效地完成这一任务，并为自己节省安装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。