使用 Grunt 将所有文件（CSS、JS、HTML）合并为一个 HTML答案

【问题标题】：Merge all files (CSS, JS, HTML) to one HTML with Grunt使用 Grunt 将所有文件（CSS、JS、HTML）合并为一个 HTML
【发布时间】：2015-11-25 09:27:28
【问题描述】：

我有一个特定的项目，其中所有代码（CSS、JS (Angular)、HTML）都必须在一个巨大的 HTML 中。我可以手动将所有 CSS 和 JS 复制到 index.hml，但这很耗时且容易出错。

对于某些项目，我已经使用了 Grunt，所以我尝试使用 grunt-contrib-concat，但它只会将文件一个接一个地合并。这并没有真正帮助我，因为 CSS 应该在 HTML 标题中的 sytle 部分中，JS 在脚本部分中。

我阅读了github 页面上的帮助，但没有明显的解决方案。

我这样调用contac 函数：

 concat: {
    options: {
      separator: ';',
    },
    dist: {
      src: ['<%= yeoman.app %>/index.html', '<%= yeoman.app %>/styles/main.css', '<%= yeoman.app %>scripts/outro.js'],
      dest: 'dist/index.html',
    }
  }

这只是一个测试，结果对我不利。

这里是否有任何占位符来告诉 concat 在哪里插入特定文件？

【问题讨论】：

请问您为什么需要这样做？
我们有一个用 Delphi 编写的旧程序... 慢慢地，我们正在将我们的应用程序转移到网络上。我们希望在 Delphi 和 Web 上使用的一些新功能。所以现在我们的 delphi 应用程序将替换这个 html 文件中的一些 id 并打开页面。最简单的方法是将所有内容合并到一个文件中。在线版本的文件已分解 - 应该是这样。
我不羡慕你，祝你好运！

标签： angularjs merge gruntjs concat

【解决方案1】：

在 grunt 中我们有一个插件

grunt.loadNpmTasks('grunt-contrib-concat');

这个插件会连接你指定的所有文件。

【讨论】：