Grunt Inline CSS and Javascript

Question

Short version:

Is there a way using Grunt to enable mini CSS and JavaScript?

To use usemin 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 --> 

The inclusion of this is 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. To use CSS or JS files in a theme, they must be loaded into Tumblr. The only way to upload is a crappy little web form, which often crashes. I try to avoid this interface until I am ready to download the final code, because

• there is no way to delete downloaded files and
• while I'm in the middle of development, these extra steps take too much time.

To get this, I copied my CSS and JS to the <style> and <script> in my file, and then copied it all to the Tumblr theme editor. It's faster, so I'm happy with it, but manually copying and pasting CSS and JS into a file seems to contradict the spirit of Grunt and its automation.

Ideally, I could run grunt build and pop out the html file using inline CSS and JS, then I can just copy it to the Tumblr interface (well, ideally, I could copy this HTML file to Tumblr, but Tumblr does not provide FTP or SSH or some useful interface, so I agree to this).

It seemed that grunt-usemin could provide the functionality that I was looking for, but I could not get it to work as I described. Perhaps this was done only to put everything in a separate file.

I am open to using any Grunt tool if anyone knows about this that could do this.

Answer 1

I've used this before: https://github.com/motherjones/grunt-html-smoosher . It is very simple, just provide an input file and an output file; no additional configuration, it just finds files automatically and embeds them.

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

Hope this helps.

Answer 2

Just providing other links that may be helpful:

This grant-insert performs inline css and javascripts, but you can do this selectively using the _inline parameter. There is also a similar grunt-inline-assests task that does the same. Both are good for generating HTML email messages.

Finally, the purpose of this is slightly different; it inserts all your css and js as external tag based in your HTML. This can be very useful when developing themes and interfaces where you want you to use the js or css contained in many small files to simplify maintenance. The Sails-linker task can be used to enter all css and js during development, and one of the above inliners can be used to generate the final product HTML file with CSS and JS, reduced and embedded.