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


Tags: javascript,html,css,mhtml

Problem :

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.



Solution :

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!


    CSS Howto..

    How to style
    to have multiple colors?

    Text Underline Showing Underline

    How to vertical align element relative other element with pseudo-class? [duplicate]

    How to create opacity effect on webOS?

    how to use !important in jQuery animate() function

    How to set border between two products in css?

    CSS How to set div height 100% minus nPx

    Wordpress nav menu images not showing up in mobile safari

    How can I center two images side-by-side with Bootstrap 3?

    Big Cartel - Slideshow Questions

    How to hide first level span element by CSS “>” selector

    How can I use CSS to vertically center the text in an anchor, within a LI?

    How at least approximately imitate col-md-1.5?

    How to change nested divs within a named div to display as display:inline using CSS or jQuery selectors?

    CSS How to I align a header with a height of 2em to the bottom

    How to run a Javascript function on an iframe before the source (src) is loaded?

    How to target CSS link with JavaScript

    How to stop a webpage from loading until all jQuery load functions are complete?

    Div Title on div border how to [closed]

    How do I change phpmyadmin font size for sql query box?

    CSS: how to properly style horizontal menu bar with background image and centered entries separated by icons

    How to vertical align text in the middle without changing size of a div

    How to push content div to footer div while keeping background in the picture

    CSS how to deal with a lot of sprite without having to create a new css class

    How To Disable Pop Up Google Translation With HTML CSS

    How can I style table to be full width of container and make the cells use percentage of the width?

    How to centre a table in html using css file? [duplicate]

    How to center data table header and data using in bootstrap w/o using CSS?

    How to select multiple CSS parent and descendant groups efficiently

    show play icon on image hover