通过带有 DDEV-local 的 Gulp 任务使用 Browsersync

Question

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

Answer 1

暴露必要的端口

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

浏览器同步的该文件的示例如下：

# 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，因为它是浏览器同步的默认值，但可以更新以反映您的项目需求。

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

有关使用 docker compose 定义新服务的更多信息，请阅读 DDEV 文档。

在 Gulp 中设置浏览器同步

这假设您已经gulpfile.js准备好处理已经包含的其他必需软件包。如果您不完全熟悉 Browser-Sync 和 Gulp，请参阅他们的文档以获取完整详细信息。

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 将输出 ahttp作为外部 URL 进行测试。然而，多亏了 ddev-router，它可以通过http或访问https。