tumblr - Grunt 内联 CSS 和 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。上传的唯一方法是一个经常崩溃的蹩脚的小网络表单。在我准备好上传最终代码之前，我试图避免这个界面，因为

无法删除上传的文件，

在开发过程中，这些额外的步骤花费了太多时间

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

理想情况下，我可以运行 grunt build并让它输出一个内联 CSS 和 JS 的 html 文件，然后我可以将其复制到 Tumblr 界面中(好吧，理想情况下，我可以将该 HTML 文件复制到 Tumblr，但 Tumblr 不提供 FTP 或SSH 或任何有用的接口(interface)，所以我会接受这个)。

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

如果有人知道可以完成此任务的工具，我愿意使用任何 Grunt 工具。

Answer 1

我以前用过这个:https://github.com/motherjones/grunt-html-smoosher .很简单，只需提供输入文件和输出文件即可；没有额外的配置，它只是自动找到文件并内联它们。

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

希望这可以帮助。