精简版:
有没有办法,使用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.上传的唯一方法是经常崩溃的糟糕的小网页形式.我正试图避免这个界面,直到我准备上传最终代码,因为
为了得到这个,我一直在复制我的CSS和JS到<style>和<script>标签我的文件,然后复制整个事情到的Tumblr主题编辑器.它更快,所以我很高兴,但手动复制和粘贴CSS和JS到文件似乎违背了Grunt的精神和它提供的自动化.
理想情况下,我可以运行grunt build并使用CSS和JS内联吐出一个html文件,然后我可以将其复制到Tumblr接口中(好吧,理想情况下,我可以将该HTML文件复制到Tumblr,但Tumblr不提供FTP或SSH或任何有用的接口,所以我会满足于此.
它似乎grunt-usemin可以提供我正在寻找的功能,但我无法按照我的描述使其正常工作.也许它只是将所有内容放入一个单独的文件中.
我愿意使用任何Grunt工具,如果有人知道可以实现这一点.