allin

Make scripts(js), styles(css), images all wrap up in a single html file.

Install

npm install allin 

Usage

for javascript

<script type="text/javascript" src="./test.js">
</script> 

test.js:

(function() {
    console.log('this is a test script');
})()

allin-html will move the content in test.js into html like:

<script type="text/javascript">
    (function() {
        console.log('this is a test script');
    })()
</script> 

for css scripts

<link rel="stylesheet" type="text/css" href="./style.css">

style.css file:

body {
    color: red;
}

allin-html will move the content in style.css into html:

<style type="text/css">
body {
    color: red;
}
</style> 

for allin css scripts

<style>
  body {
    background-color: #000;
    background-image: url('./datagarage.png');
  }
</style> 

allin-html will convert urls to base64 into html:

<style>
body {
  background-color: #000;
  background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKIAAAAx....')
}
</style> 

for image

<img src="./datagarage.png"/>

allin-html fetch the img and convert to base64 into html:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKIAAAAxCAYAAABZAHL2AAANw0lEQVR42u1de3xUxRUeIspDkDciokHkEVBemg......."/>

Sample

var allin_test = allin(path.join(__dirname, 'allin.html'), function(html) {
    fs.writeFileSync('./test_after.html', html)
    });

Options

in allin we are using package https://github.com/kangax/html-minifier, for doing the tasks like minify JS, CSS, HTML, remove comments..., so you can set up opt like

var opt = {
  "minifyCSS": true,
  "minifyJS": true,
  "removeComments":true,
  "collapseWhitespace": true
}

in APIs.

Example:

var allin_test = allin(path.join(__dirname, 'allin.html'), opt, function(html) {
    fs.writeFileSync('./test_after.html', html)
    });

API

allin(html path, opt, callback)

• html path: should be the absolute path to your html file.
• callback: callback function, will pass the html that have being convert.

allin.html(html, base directory, callback)

• html: raw html
• base directory: base directory of your html file.
• callback: callback function, will pass the html that have being convert.

CLI

Install

sudo npm install -g allin

Usage: allin [options] <source to your html, default ./index.html>

  Options:

    -h, --help                 output usage information
    -V, --version              output the version number
    -m, --minifyall            Minify css, html, js, images.
    -o, --output <directory>   Path to output directory, defaults to current directory
    -n, --filename <filename>  Output html file name, default to output.html

for example

$ allin test/allin.html -o ./ -m -n testing.html

In other words:

make test/allin.html allin + output to folder ./ + minify css, js, html + output file name testing.html

License

MIT @chilijung