通过DDEV-local的Gulp任务使用浏览器同步

rjzwgtxy  于 2022-12-08  发布在  Gulp
关注(0)|答案(5)|浏览(180)

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

yzuktlbb

yzuktlbb1#

公开必要的端口

这种情况的第一部分需要使用Docker Compose文件向软管机公开容器的端口。根据此答案,您需要在.ddev目录中创建一个docker-compose.browsersync.yaml文件。
浏览器同步文件示例如下:

# 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文档。

设置浏览器同步

这是假设你已经有了一个可以运行的gulpfile.js来处理你所需要的其他软件包。如果你还不完全熟悉浏览器同步和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路由器,它可以通过httphttps访问。

uqxowvwt

uqxowvwt2#

为BrowserSync的HTTP和HTTPS公开端口3000

借用@TXChetG和@Mario埃尔南德斯的答案
在隐藏的/.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
bwleehnv

bwleehnv3#

如果你是一个mac用户,而browsersync仍然不能使用上面的解决方案,你可能需要像我一样更新你的/etc/hosts文件。
您可以在this answer中查看更多详细信息。

ql3eal8s

ql3eal8s4#

我无法从 * 容器内 * 运行browsersync。我更新了本地系统并 * 在本地 * 运行browsersync
我在本页的其他地方使用了Stephen的解决方案(https://stackoverflow.com/a/70190271/18779供快速参考)。
我运行的是Mac,因此我还执行了以下操作:

  • 升级自制软件
  • 使用brew安装nvm
  • 使用nvm安装节点12(我不得不尝试几个版本来消 debugging 误。12对我来说很有效。
  • 使用npm来重建节点sass。我在执行此操作之前收到了sass错误。
  • 运行browsersync。我使用Drupal和Radix子主题,因此,对我来说,这是cd [subtheme dir]npm run watch
lymnna71

lymnna715#

上面的提示和从其他职位喜欢:
Using Docker Compose to expose DDEV web container ports to host machine
Chrome can't open localhost:3000 with Gulp / BrowserSync
对于HTTP协议上的网站可能没问题,但对于HTTPS协议上的网站就不行了。
具体来说,我正在DDEV中测试CMS安装,前端/后端中有安全URL。运行ddev start命令后,显示我在浏览器中使用https://myproject.ddev.sitehttps://127.0.0.1:62751访问它(套接字随着每次运行DDEV而变化)。
我没有安装drud/ddev-browsersync包,因为它不代理到HTTPS,在我的情况下,它没有帮助我在所有。
我在一个目录中创建了gulpfile.js文件来对scss,js,css,html文件执行复杂的任务。为了不在浏览器中手动重新加载页面,我显然需要BrowserSync。唯一起作用的配置如下:

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

function startServer () {

    browserSync.init({
      proxy: 'https://127.0.0.1:62751',
    });
};

exports.startServer = startServer;

当我运行gulp startServer命令时,首先https://localhost:3002显示在地址栏中,然后过一会儿它重定向到https://myproject.ddev.site
我遇到的唯一问题是,每次运行ddev start命令后,我必须手动更改https://127.0.0.1:XXXXX行中的端口。如果DDEV提供了此值,我可以使用它,然后问题就解决了。

相关问题