Gulp + BrowserSync，服务于路径答案

【问题标题】：Gulp + BrowserSync, serve at pathGulp + BrowserSync，服务于路径
【发布时间】：2015-08-02 22:40:48
【问题描述】：

我正在使用 Gulp 和 BrowserSync 在 localhost:9000 上为我的 web 应用程序提供服务。
我怎样才能在 localhost:9000/some/multi/level/path 上提供 web 应用程序？

【问题讨论】：

标签： gulp browser-sync

【解决方案1】：

Browsersync 的静态服务器可以配置为从任意子路径提供页面。在初始化 Browsersync 的静态服务器时，添加一个路由定义，其中键是要匹配的 url 片段，值是要服务的目录（路径应该相对于当前工作目录）。

试试这样的：

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

gulp.task('watch', function() {
  browsersync.init({
    files: './*.html',
    startPath: '/some/multi/level/path',
    server: {
      baseDir: '-',
      routes: {
        '/some/multi/level/path': '.'
      }
    }
  });
});

运行gulp watch 将启动Browsersync 并打开一个页面，其中./ 的内容显示在url http://localhost:3000/some/multi/level/path 处。

baseDir 必须设置为非空字符串，并且不需要是有效路径。虚假值（null、false 和空字符串）将不起作用。

上面的 sn-p 是一个有效的 gulpfile，并针对 Browsersync v2.18.5 和 gulp v3.9.1 进行了测试。这是complete gist。

【讨论】：

谢谢！这正是我一直在寻找的（startPath、baseDir 和 routes 的组合为我做到了）。我的博客有一个单独的 repo 并在 mainDomain.com/blog 上发布，并希望在开发模式下正确的 url 结构。

【解决方案2】：

在您的浏览器同步选项中，传入startPath 以使其从'/' 的不同URL 开始。

这不会改变您的服务器只提供 BrowserSync 开始的路径。

http://www.browsersync.io/docs/options/#option-startPath

【讨论】：

谢谢，我想它解决了一半的问题。剩下的一半是让 BrowserSync 以与 startPath 相同的路径为应用程序提供服务。
@MartinStålberg 你能解决这个问题的后半部分吗？
@JonHarding，不幸的是我无法解决它。
给未来的读者。 startPath 到现在为止。使用代理时似乎被忽略了。一种解决方法是使用 require('opn')

【解决方案3】：

似乎该选项不可用。 startPath 只会更改 browsersync 打开的 URL。

我终于想出了一个简单的解决方案：

只需创建一个从some/multi/level/path 目录到your app files 的符号链接。然后转到localhost:9000/some/multi/level/path 将提供与转到localhost:9000 相同的文件

【讨论】：

【解决方案4】：

对此+1。

对于我的测试服务器，我使用的是 gulp-webserver：

 gulp.src('./public')
    .pipe(webserver({
      host: 'localhost',
      port: '8000',
      path: '/myapp', 
      fallback: 'index.html'
      directoryListing: false,
      https: true
    }))

然后我从

访问应用程序

https://localhost:8000/myapp/view

但是当我将 Browsersync 用于开发模式时，我必须使用

https://localhost:9000/view

如果它是一样的就好了，那么也许我会停止使用 gulp-webserver。

【讨论】：