通过 Gulp 任务与 DDEV-local 使用 Browsersync

Question

我正在使用 DDEV 作为我的本地托管环境，我的许多项目都是通过 Gulp 实现前端自动化的。 Browsersync 是我们前端设置的主要组件，需要 DDEV 容器向主机公开端口。手头的问题有两方面，从容器向主机公开端口的最佳方法是什么，以及在 DDEV 环境中浏览器同步 Gulp 任务的最佳设置是什么？

Answer 1

公开必要的端口

这种情况的第一部分需要使用 Docker Compose 文件将容器的端口暴露给软管机。基于 this Answer，您需要在 .ddev 目录中创建一个 docker-compose.browsersync.yaml 文件。

Browser-Sync 的文件示例如下：

# Override the web container's standard HTTP_EXPOSE and HTTPS_EXPOSE
# This is to expose the browsersync port.
version: '3.6'
services:
  web:
    # ports are a list of exposed *container* ports
    expose:
      - '3000'
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80,${DDEV_MAILHOG_PORT}:8025,3001:3000
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80,${DDEV_MAILHOG_HTTPS_PORT}:8025,3000:3000

我们在这里公开端口 3000，因为它是 Browser-Sync 的默认端口，但可以更新以反映您项目的需要。

注意：将此文件添加到 .ddev 目录后，您应该重新启动 ddev 项目。

有关使用 docker 组合定义新服务的更多信息，read the DDEV docs。

在 Gulp

中设置浏览器同步

这假设您有一个工作 gulpfile.js 准备好处理您已经包含的其他所需包。如果您不完全熟悉 Browser-Sync 和 Gulp，请参阅 their docs 了解详细信息。

const browserSync = require('browser-sync').create();

/*
* Set 'url' (the host and proxy hostnames) to match the canonical url of your ddev project.
* Do not include the http/s protocol in the url. The ddev-router will route the
* host machine's request to the appropriate protocol.
* 
* ex: yoursite.ddev.site
*/
const url = 'yoursite.ddev.site';

/*
* This function only includes the most basic browser-sync settings needed
* to get a watch server running. Please refer to the browser-sync docs for other
* available options.
*/
const startServer = function (done) {
    // Initialize BrowserSync
    browserSync.init({
        proxy: url,
        host: url,
        port: 3000,
    });
    done();
};

exports.startServer = startServer;

您可以在初始设置后使用 gulp startServer 对此进行测试。 Gulp 将输出一个 http 作为外部 URL 用于测试。然而，多亏了 ddev-router，它可以通过 http 或 https.

访问

Answer 2

为 BrowserSync 的 HTTP 和 HTTPS 公开端口 3000

借用 @TXChetG and the answer from @Mario Hernandez

的答案

在隐藏的 /.ddev/ config 文件夹中创建一个名为“docker-compose.browsersync.yaml”的文件，代码如下，正确标记（这非常重要），然后运行命令“ddev restart”

# Override the web container standard HTTP_EXPOSE and HTTPS_EXPOSE
# This is to expose the browsersync port.
version: '3.6'
services:
  web:
    # ports are a list of exposed *container* ports
    expose:
      - '3000'
    environment:
      - HTTP_EXPOSE=${DDEV_ROUTER_HTTP_PORT}:80
      - HTTPS_EXPOSE=${DDEV_ROUTER_HTTPS_PORT}:80

Answer 3

如果您是 mac 用户并且 browsersync 仍然无法使用上述解决方案，您可能需要像我一样更新您的 /etc/hosts 文件。

您可以在中查看更多详细信息。

Answer 4

我无法从容器中运行浏览器同步。我更新了本地系统和运行 browsersync locally

我在本页其他地方使用了 Stephen 的解决方案（以供快速参考）。

我正在运行宁 Mac 所以我也做了以下事情：

升级自制软件
使用brew安装nvm
使用 nvm 安装节点 12（我不得不尝试几个版本来消除错误。12 对我有用。
使用 npm 重建 node-sass。在执行此操作之前我遇到了 sass 个错误。
运行浏览器同步。我正在使用 Drupal 和 Radix 子主题，所以对我来说，那是 cd [subtheme dir] 和 npm run watch

通过 Gulp 任务与 DDEV-local 使用 Browsersync

Using Browsersync via a Gulp Task with DDEV-local

gulp

browser-sync

ddev

gulp-browser-sync

公开必要的端口

在 Gulp

为 BrowserSync 的 HTTP 和 HTTPS 公开端口 3000