Short Version:
Is there a way, using Grunt, to include minified CSS and JavaScript inline?
To use usemin's formatting as an example, I would like to see something like this:
<!-- 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 -->
Turned into this something like this:
<style>body { color: red; } /*css is here*/</style>
<script>var foo = 1; bar = 'some javascript code is here'; ...</script>
Long Version:
So, I'm working on a Tumblr theme. In order to use CSS or JS files in a theme, they have to be uploaded to Tumblr. The only way to upload is a crappy little web form that often crashes. I'm trying to avoid this interface until I'm ready to upload the final code because
- there's no way to delete uploaded files, and
- while I'm in the middle of development, these extra steps take too much time
To get this, I've been copying my CSS and JS into <style>
and <script>
tags in my file, then copying the whole thing into the Tumblr theme editor. It's faster, so I'm happy with that, but manually copying and pasting CSS and JS into a file seems to go against the spirit of Grunt and the automation it provides.
Ideally, I would be able to run grunt build
and have it spit out an html file with the CSS and JS inline, then I can just copy that into the Tumblr interface (well, ideally, I would be able to copy that HTML file to Tumblr, but Tumblr doesn't provide FTP or SSH or any useful interface, so I'll settle for this).
It seemed like grunt-usemin
could provide the functionality I'm looking for, but I haven't been able to get it working as I described. Maybe it's only made to put everything into a separate file.
I'm open to using any Grunt tool if anyone knows of one that could accomplish this.