1

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

<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 插件的建议，例如这个。但是，出于工作流程的原因，我想保持index.html清洁（例如，我不想要一个令牌代替脚本包含，它需要在没有进一步处理的情况下工作。）

4

1 回答 1

0

我想出了一个很好的基于 Maven 的解决方案，使用maven-replacer-plugin。在我的 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 -->

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

于 2013-05-29T00:39:39.047 回答