Gulp：设置 browserSync 和 Watch 时遇到问题答案

【问题标题】：Gulp: Trouble setting browserSync and WatchGulp：设置 browserSync 和 Watch 时遇到问题
【发布时间】：2016-09-16 06:56:36
【问题描述】：

我正在学习 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"

有人知道我做错了什么吗？

【问题讨论】：

标签： node.js gulp gulp-watch browser-sync

【解决方案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'

【讨论】：

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

【讨论】：