7

精简版：

有没有办法使用 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 工具。

4

2 回答 2

5

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

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

希望这可以帮助。

于 2013-10-29T19:03:56.577 回答
1

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

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

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

于 2016-06-30T20:46:53.273 回答