Question

我有一个网站项目，其中包含index.html主体末尾的几个JavaScript文件，其中一些来自第三方库，其余的是我写的：

<html>
  ...
  <body>
  ...
  <script src="lib/lib1.js"></script>
  <script src="lib/lib2.js"></script>
  <script src="js/js1.js"></script>
  <script src="js/js2.js"></script>
  ...
  </body>
</html>

对于制作，我自然想要一套优化的包含。首先，作为更大的构建过程（使用Maven）的一部分，所有非库JavaScript都被组合，优化和缩小。我还想使用缩小的库文件（可能来自CDN）：

<html>
  ...
  <body>
  ...
  <script src="lib/lib1.min.js"></script>
  <script src="//cdn/lib2.min.js"></script>
  <script src="js/combined.min.js"></script>
  ...
  </body>
</html>

我们的CSS使用了类似的过程。

所以，我的问题是：人们使用什么技术来完成脚本/ CSS集之间的这种切换？

由于我的生产构建过程已经使用了Maven，因此我愿意接受涉及Maven插件的建议，例如this one。但是，出于工作流程的原因，我希望保持index.html干净（例如，我不希望代替脚本包含令牌，它需要在没有进一步处理的情况下工作。）

Answer 1

我使用maven-replacer-plugin想出了一个很好的基于Maven的解决方案。在我的HTML文件中，我使用注释来阻止我的开发和生产代码：

<!-- DEVELOPMENT -->
<script src="lib/lib1.js"></script>
<script src="lib/lib2.js"></script>
<script src="js/js1.js"></script>
<script src="js/js2.js"></script>
<!-- /DEVELOPMENT -->
<!-- PRODUCTION
<script src="lib/lib1.min.js"></script>
<script src="//cdn/lib2.min.js"></script>
<script src="js/combined.min.js"></script>
/PRODUCTION -->

然后，我为Maven插件使用以下配置块：

<configuration>
    <file>index.html</file>
    <replacements>
        <replacement>
            <token>&lt;!-- DEVELOPMENT --&gt;</token>
            <value>&lt;!-- DEVELOPMENT</value>
        </replacement>
        <replacement>
            <token>&lt;!-- /DEVELOPMENT --&gt;</token>
            <value>/DEVELOPMENT --&gt;</value>
        </replacement>
        <replacement>
            <token>&lt;!-- PRODUCTION</token>
            <value>&lt;!-- PRODUCTION --&gt;</value>
        </replacement>
        <replacement>
            <token>/PRODUCTION --&gt;</token>
            <value>&lt;!-- /PRODUCTION --&gt;</value>
        </replacement>
    </replacements>
</configuration>

运行后，切换开发代码并切换生产代码：

<!-- DEVELOPMENT
<script src="lib/lib1.js"></script>
<script src="lib/lib2.js"></script>
<script src="js/js1.js"></script>
<script src="js/js2.js"></script>
/DEVELOPMENT -->
<!-- PRODUCTION -->
<script src="lib/lib1.min.js"></script>
<script src="//cdn/lib2.min.js"></script>
<script src="js/combined.min.js"></script>
<!-- /PRODUCTION -->

显然，您可以轻松删除开发代码。

以编程方式切换到网页的生产源

1 个答案: