tumblr – Grunt内联CSS和Javascript

精简版：

有没有办法,使用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构建并使用CSS和JS内联吐出一个html文件,然后我可以将其复制到Tumblr接口中(好吧,理想情况下,我可以将该HTML文件复制到Tumblr,但Tumblr不提供FTP或SSH或任何有用的界面,所以我会满足于此.

似乎grunt-usemin可以提供我正在寻找的功能,但我无法按照我的描述使其工作.也许它只是将所有内容放入一个单独的文件中.

我愿意使用任何Grunt工具,如果有人知道可以实现这一点.

解决方法

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

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

希望这可以帮助.

tumblr – Grunt内联CSS和Javascript

解决方法

相关文章