How to embedded all resources(css,js,images) into one single html file?

Question

So my question is kinda a clone of this one except the answer proposed use .net technology and I'm working on linux.

Here is a summary :

I'm working with html5 based slide for presentation. These slides are created like every website with subfolders containing resources. I'm looking for a way to convert this slides in a standalone file to be able to share them easily.

This just means replacing all images by base64 images and js/css import by inline plain text. I'm also using require.js so replacing javascript import could be a bit more tricky but this will be a second time problem.

I'm not using MHTML because it's not really supported by browsers.

Answer 1

Try to use Gulp.js or Grunt.js which operate with files and have plenty of plugins each. I personally prefer to use Gulp because of its stream-based model—it's fast and flexible, but you may find Grunt more simple or (very likely) find an appropriate plugin faster. Both of them are Node.js utils accepting configuration files written in JavaScript, so you don't have to use Java or any nonconventional technology for this task.

You may start with reading an introductionary article about Gulp, then search for available gulp plugins by one of the keywords: inline, asset, minify, etc.

Good luck with workflow optimization!