咕噜内联CSS和Javascript

有没有一种方法，使用咕噜，包括精缩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工具，如果有人知道可以做到这一点。

来源

2013-10-29 Jonathan Wren

我不知道任何grunt插件，可以缩小内联JS和CSS。你可以做的最好的是通过在线缩小工具手动研磨它们，然后复制粘贴到你的Tumblr主题中。 –

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

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

希望这会有所帮助。

来源

2013-10-29 19:03:56 Ben

这正是我一直在寻找的。谢谢！ –

截至2014年2月，npm安装grunt-html-smoosher停止工作，因为它取决于已从npm注册表中删除的软件包。（请参阅项目回购的多个问题。）有一个拉动请求来解决这个问题，但grunt-html-smoosher在一年左右没有看到任何进展。与此同时，我已经发布了[grunt-html-smoosher-install-fix]（https://www.npmjs.com/package/grunt-html-smoosher-install-fix）。这是一个希望临时的解决方法，直到修复程序合并或有人分叉项目或其他东西。 – Trott

@特罗特我也在下面提出了一些替代方案 – JrBenito

只是提供给其他的引用可能是有用的：

这grant-inline任务做内联CSS和JavaScript的，但你可以使用_inline参数做选择。还有一个类似的任务grunt-inline-assests做同样的事情。两者都很好生成HTML电子邮件。

最后，this one的目的有些不同;它会根据HTML中的标记插入所有css和js作为外部参数。在开发主题和前端时，这可能非常有用，您希望将js或css包含在许多小文件中以便于维护。Sails-linker任务可用于注入所有的CSS和JS，而在发展和单排滑轮鞋上面中的一个可以用于生成与CSS最终生产HTML文件，JS 精缩和内联。

来源

2016-06-30 20:46:53 JrBenito

咕噜内联CSS和Javascript

回答

相关问题