Gulp：无法设置 browserSync 和 Watch

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 一个新的浏览器 window 确实打开但只显示 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'

我认为这是您需要的，运行它来自您网站的物理根目录，并将 mylocal.dev 替换为您的 php 服务器地址

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 docs example）：

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 有一些解决方案。

Gulp：无法设置 browserSync 和 Watch

Gulp: Trouble setting browserSync and Watch

node.js

gulp

gulp-watch

browser-sync