packify
packs up browserify apps by inlining all assets into one html file
npm install packify -g
packify index.html > packed.html
how it works
packify will do the following transformations:
<img src="foo.png">-><img src="data:..."><link rel="stylesheet" href="foo.css">-><style> /** styles here **/ </style><script src="foo.js">-><script> /** browserified foo.js here **/ </script>background-image { url(foo.png) }->background-image { url('data:...') }
all transformations are handled by dependencies: inline-images, inline-styles, imageinliner and scriptify
notes:
url(foo.png)inside stylesheets will also get converted to inline data-uris- only relative URIs will be transformed, e.g.
<script src="http://foo.com/foo.js">will be ignored
example
the dat-editor module/application uses this.
before packify: https://github.com/maxogden/dat-editor/blob/master/index.html after packify: https://github.com/maxogden/dat-editor/blob/master/prebuilt.html
prebuilt.html is generated by this npm command https://github.com/maxogden/dat-editor/blob/master/package.json#L8 (note the brfs transform https://github.com/maxogden/dat-editor/blob/master/package.json#L28-L32)
usage
javascript
var packify = var opts = html: "<html> ... your html here... </html>" args: 'arguments' 'for' 'browserify' selector: 'script' // css selector passed to scriptify for it to select elements to browserify CLI
packify <path-to-html-file>
when using on the CLI any additional arguments beyond the HTML file will be passed straight to browserify, e.g.
packify index.html -t brfs
will run browserify like browserify -t brfs