packs up browserify apps by inlining all assets into one html file
npm install packify -g
packify index.html > packed.html
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
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)
var packify = require('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
}
packify(opts, function(err, packed) {
console.log(packed.toString())
})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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent