小编Jon*_*ren的帖子

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 -->
Run Code Online (Sandbox Code Playgroud)

变成这样的事情:

<style>body { color: red; } /*css is here*/</style>
<script>var foo = 1; bar = 'some javascript code is here'; ...</script>
Run Code Online (Sandbox Code Playgroud)

长版:

所以,我正在研究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工具,如果有人知道可以实现这一点.

tumblr gruntjs grunt-usemin

6
推荐指数
1
解决办法
2901
查看次数

标签 统计

grunt-usemin ×1

gruntjs ×1

tumblr ×1