Question

有几个博客文章解释了为什么从简单的npm切换到grunt或gulp到建筑是一个好主意，例如Cory Hourse这个或Keith Cirkle这个。这些博客文章没有解释的一件事是我如何轻松地进行环境配置。例如，常见的要求是具有不同的REST API位置。在开发期间，服务器可能正在localhost:8080上运行，但在生产时，应通过相对URL（例如/api或/rest/api访问它，并且端口或协议对于开发和生产是不同的。

有几种解决方案。例如，grunt支持<% %>和<%= %>之类的模板字符串，并且有关于grunt-ng-config的问题中有grunt或gulp插件。这些解决方案特定于Angular（我正在使用），但我不需要寻找AngularJS特定的解决方案。

我也知道angular-environment插件，但据我所知，这可以在运行时进行配置，我正在寻找可以在构建时执行此操作的内容。

所以我正在寻找的东西允许我在构建时配置我的应用程序，方法是更换一些模板字符串或生成一个Javascript文件，其中包含一些我可以在运行时读取的变量。

一个要求是它应该与操作系统无关。所以我不想使用诸如sed之类的UNIX特定工具来重写文件。由于变量扩展不同（例如%与$），解决方案不应依赖于环境变量。

是否有现有的解决方案或最佳实践？

Answer 1

由于不同的变量扩展（例如％vs. $），解决方案应该如此不依赖于环境变量

这会切断您的最佳解决方案。为什么不依靠env vars？节点提供

process.env

访问env vars。您可以创建使用process.env而不是＆＃34;不同变量扩展的自定义gulp / grunt任务＆＃34;你指的是。

例如，您可以使用Jade模板在构建时将env var值传递给HTML。这将在构建过程中动态生成index.html，并根据env变量添加相关类。

例如，根据env var的值，您可以在HTML标记上设置一个类。

这可能反映了客户。

然后你可以有一些CSS

.customer1 .myimage {
  background-image: url("customer1.png");
}

.customer2 .myimage {
  background-image: url("customer2.png");
}

或者您可以使用JavaScript来检测在构建期间添加到哪个类。

使用npm构建时的环境配置

1 个答案: