Grunt Inline CSS and Javascript

Question

简短版本：

有没有办法使用Grunt来包含缩小的CSS和JavaScript内联？

以usemin的格式为例，我希望看到这样的东西：

<!-- build:css inline -->
<link rel="stylesheet" href="styles/foo.css">
<link rel="stylesheet" href="styles/bar.css">
...
<!-- endbuild -->
<!-- build:js inline -->
<script src="js/foo.js"></script>
<script src="js/bar.js"></script>
...
<!-- endbuild -->

变成了这样：

<style>body { color: red; } /*css is here*/</style>
<script>var foo = 1; bar = 'some javascript code is here'; ...</script>

长版本：

所以，我正在研究一个Tumblr主题。为了在主题中使用CSS或JS文件，必须将它们上传到Tumblr。上传的唯一方法是经常崩溃的蹩脚小网络表单。我试图避免使用这个接口，直到我准备好上传最终代码，因为

1. 无法删除上传的文件，并且
2. 当我处于开发过程中时，这些额外的步骤需要太多时间

为了得到这个，我一直在将我的CSS和JS复制到文件中<style>和<script>标签中，然后将整个内容复制到Tumblr主题编辑器中。它更快，所以我对此感到满意，但是手动将CSS和JS复制并粘贴到文件中似乎违背了Grunt的精神及其提供的自动化。

理想情况下，我将能够运行grunt build并让它吐出一个内联的 CSS 和 JS 的 html 文件，然后我可以将其复制到 Tumblr 界面中（嗯，理想情况下，我将能够将该 HTML 文件复制到 Tumblr，但 Tumblr 不提供 FTP 或 SSH 或任何有用的接口， 所以我会满足于此）。

似乎grunt-usemin可以提供我正在寻找的功能，但我无法让它像我描述的那样工作。也许它只是将所有内容放入一个单独的文件中。

如果有人知道可以做到这一点，我愿意使用任何 Grunt 工具。

Answer 1

我以前用过这个：https://github.com/motherjones/grunt-html-smoosher。非常简单，只需提供输入文件和输出文件;无需额外的配置，它只是自动查找文件并内联它们。

grunt.initConfig({
  smoosher: {
    dist: {
      files: {
        'dest-index.html': 'source-index.html',
      },
    },
  },
});

希望这有帮助。

Answer 2

只是提供其他可能有用的参考：

此授权内联任务执行内联 css 和 javascript，但您可以使用 _inline 参数有选择地执行此操作。还有一个类似的任务咕噜咕噜咕噜做同样的事情。两者都适合生成HTML电子邮件。

最后，这个目的有点不同;它根据HTML中的标签将所有css和js作为外部插入。这在开发主题和前端时非常有用，您希望将 js 或 css 包含在许多小文件中以便于维护。Sails-linker 任务可用于在开发过程中注入所有 css 和 js，上面的内联之一可用于生成最终的生产 HTML 文件，其中 CSS 和 JS 缩小和内联。