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或任何有用的接口，所以我会满足于此。

似乎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

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

此grant-inline任务执行内联css和javascripts，但您可以使用_inline参数进行选择。还有一个类似的任务grunt-inline-assests做同样的事情。两者都可以生成HTML电子邮件。

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

Grunt内联CSS和Javascript

2 个答案: