精简版:
有没有办法,使用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',},});
希望这可以帮助.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。