Shopify Slater 本地到实时开发工作流程（从实时同步）

Question

我已将我的前端工作流程从旧的 Shopify Themekit 方式更新为 Webpack 方式。虽然我使用最新的前端技术很棒，但我正在为这个新的工作流程而苦苦挣扎。

在我的旧工作流程中，我可以通过 Github 和 Shopify Themekit gem 将更改推送到实时主题并从实时主题中提取更改。什么都没有编译。虽然这更容易管理，但对性能却不是很好。

本地主题 >> Github >> 直播主题

新的工作流程是（基于Slater Base theme）：

本地主题 >> Webpack >> 构建 >> 实时主题

我已经设置了 Github，但它并没有真正做任何事情，因为它无助于主题之间的同步，而只是将更改从我的本地开发主题推送到 repo。现在，我的本地主题中的 src 文件正在被 Webpack 编译并缩小到构建目录中，并推送到 Shopify 实时主题上的适当格式。

我正在努力解决的问题是：

1. 如何从 Live 主题中下拉更改？这甚至可能吗？ Shopify 应用程序会更改实时主题上的代码，而客户会更改代码/设置等。我需要将它们拉入我的本地主题中以作为一个整体进行部署，否则主题将不同步并且变得一团糟。

2. 如何在 src 目录中的 .js 和 .scss 文件中使用 Liquid？目前，我无法为文件添加 .liquid 扩展名，或者至少它没有做任何事情。

Answer 1

不幸的是，Slate 和 Slater 都没有提供内置方式从 Shopify 中提取文件。也就是说，我遇到了同样的问题，客户直接在代码编辑器中编辑代码而不告诉我们，然后当我们覆盖它时会生气。

据我所知，这个问题没有非常优雅的解决方案，因为您的 CSS 和 JS 仅以它们在 Shopify 上的编译形式存在。

也就是说，您可以利用Theme Kit 使其更容易一些。我建议为此在全局范围内安装 Theme Kit。

首先，您需要确保您的根目录中有一个config.yml 文件。 Follow these instruction in the Theme Kit docs to set that up.

请注意，您可以在 config.yml 文件中设置多个环境，就像使用 Slate 或 Slater 时可以拥有多个 .env 文件一样。运行 Theme Kit 命令时，它们默认使用 development 环境，但您可以通过在命令末尾添加 -e [environment-name] 来指定不同的环境。

在继续之前，请确保您的 dist 或 build 目录是最新的。

设置好配置文件并准备好下载主题文件后，运行：

theme download -d src -e [environment-you-want-to-download-from]

这会将整个主题下载到您的src 目录中（使用上面的-d 标志指定）。

确保在提交之前非常仔细地查看差异。您会注意到编译的资产现在位于您的src 目录的assets 文件夹中，并且您的styles 或scripts 目录中的所有文件都没有更新。不好，但我们会在下一步中解决这个问题，所以只要所有 .liquid 文件更改看起来都不错，请继续提交。

接下来，进入您的dist 或build 目录，并从assets 目录打开已编译的CSS 和JS 文件。将每个内容复制并粘贴到src目录下assets目录下的对应文件中。现在，您可以检查已上传到 Shopify 的编译文件与下载主题之前编译的文件之间的差异。在src 目录的styles 和scripts 目录中滚动并添加对未编译文件的更改。完成后，删除所有已下载的已编译资产。

你有它。它不漂亮，仍然需要大量的手工工作，而且这些工具的使用方式肯定不是这样，但它解决了这个不常见的问题。

关于你的第二个问题，assets 目录下只能有.css.liquid 和.js.liquid 文件，你需要像这样将它们添加到你的布局文件中：

{{ "file-name.css" | asset_url | stylesheet_tag }}

{{ "file-name.js" | asset_url | script_tag }}

注意：不要包含 .liquid 扩展名