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界面中。但是Tumblr不提供FTP或SSH等实用接口，因此我只能采用上述方法。

我尝试使用grunt-usemin实现这一功能，但无法按照预期工作。如果有任何人知道可以完成此操作的Grunt工具，我愿意尝试使用它们。

- Jonathan Wren

---

我不知道有任何Grunt插件可以压缩内联JS和CSS。最好的方法是手动使用在线压缩工具进行处理，然后将其复制粘贴到您的Tumblr主题中。 - Pankaj Parashar

Answer 1

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

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

希望这能帮到您。

- Ben

---

截至2014年2月某个时间点，npm安装grunt-html-smoosher停止工作，因为它依赖于已从npm注册表中删除的软件包（请参见该项目的存储库上的多个问题）。有一个拉取请求来修复它，但是grunt-html-smoosher已经一年左右没有进行任何开发。同时，我发布了grunt-html-smoosher-install-fix来解决这个问题。这是一个希望暂时的解决方法，直到修复被合并或有人fork该项目或其他什么事情发生。 - Trott

Answer 2

我提供一些可能有用的其他参考资料：

这个 grant-inline 任务可以执行内联css和javascript，但是您可以使用 _inline 参数进行选择。还有一个类似的任务 grunt-inline-assests 可以执行相同的操作。两者都很适合生成HTML邮件。

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

- JrBenito