├── .gitignore
├── .DS_Store
├── cli.js
├── package.json
├── index.js
└── readme.md


/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules


--------------------------------------------------------------------------------
/.DS_Store:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/max-mapper/packify/HEAD/.DS_Store


--------------------------------------------------------------------------------
/cli.js:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env node
 2 | 
 3 | var fs = require('fs')
 4 | var packer = require('./')
 5 | 
 6 | var args = process.argv.slice(2)
 7 | var file = args.slice(0, 1)[0]
 8 | 
 9 | var opts = {
10 |   html: fs.readFileSync(file)
11 | }
12 | 
13 | opts.args = args.slice(1)
14 | 
15 | packer(opts, function(err, packed) {
16 |   console.log(packed.toString())
17 | })
18 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "packify",
 3 |   "version": "1.1.2",
 4 |   "description": "packs up browserify apps by inlining all assets into one html file",
 5 |   "main": "index.js",
 6 |   "bin": "cli.js",
 7 |   "author": "max ogden",
 8 |   "license": "BSD",
 9 |   "dependencies": {
10 |     "brfs": "^1.1.1",
11 |     "inline-images": "^1.0.1",
12 |     "inline-styles": "^1.0.0",
13 |     "scriptify": "^0.2.0",
14 |     "concat-stream": "^1.4.6"
15 |   },
16 |   "devDependencies": {},
17 |   "repository": {
18 |     "type": "git",
19 |     "url": "https://github.com/maxogden/packify.git"
20 |   },
21 |   "bugs": {
22 |     "url": "https://github.com/maxogden/packify/issues"
23 |   },
24 |   "homepage": "https://github.com/maxogden/packify"
25 | }
26 | 


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
 1 | var scriptify = require('scriptify')
 2 | var styleInliner = require('inline-styles')
 3 | var imageInliner = require('inline-images')
 4 | var concat = require('concat-stream')
 5 | var path = require('path')
 6 | var fs = require('fs')
 7 | var url = require('url')
 8 | 
 9 | module.exports = function(opts, cb) {
10 |   // inline <img> tags
11 |   var html = imageInliner(opts.html)
12 |   
13 |   // inline <script> tags
14 |   opts.selector = opts.selector || 'script'
15 |   var scriptifier = scriptify(opts)
16 |   scriptifier.pipe(concat(inlineStyles))
17 |   scriptifier.on('error', cb)
18 |   scriptifier.write(html)
19 |   scriptifier.end()
20 |   
21 |   function inlineStyles(html) {
22 |     // inline <link rel="stylesheet"> tags
23 |     var inlined = styleInliner(html)
24 |     cb(null, inlined)
25 |   }
26 | }
27 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # packify
 2 | 
 3 | packs up browserify apps by inlining all assets into one html file
 4 | 
 5 | ```
 6 | npm install packify -g
 7 | packify index.html > packed.html
 8 | ```
 9 | 
10 | ![dat](http://img.shields.io/badge/Development%20sponsored%20by-dat-green.svg?style=flat)
11 | 
12 | ## how it works
13 | 
14 | packify will do the following transformations:
15 | 
16 | - `<img src="foo.png">` -> `<img src="data:...">`
17 | - `<link rel="stylesheet" href="foo.css">` -> `<style> /** styles here **/ </style>`
18 | - `<script src="foo.js">` -> `<script> /** browserified foo.js here **/ </script>`
19 | - `background-image { url(foo.png) }` -> `background-image { url('data:...') }`
20 | 
21 | all transformations are handled by dependencies: [inline-images](http://npmjs.org/inline-images), [inline-styles](http://npmjs.org/inline-styles), [imageinliner](https://www.npmjs.org/package/imageinliner) and [scriptify](http://npmjs.org/scriptify)
22 | 
23 | notes:
24 | 
25 | - `url(foo.png)` inside stylesheets will also get converted to inline data-uris
26 | - only relative URIs will be transformed, e.g. `<script src="http://foo.com/foo.js">` will be ignored
27 | 
28 | ## example
29 | 
30 | the [dat-editor](https://github.com/maxogden/dat-editor) module/application uses this.
31 | 
32 | before packify: https://github.com/maxogden/dat-editor/blob/master/index.html
33 | after packify: https://github.com/maxogden/dat-editor/blob/master/prebuilt.html
34 | 
35 | `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)
36 | 
37 | ## usage
38 | 
39 | ### javascript
40 | 
41 | ```js
42 | var packify = require('packify')
43 | 
44 | var opts = {
45 |   html: "<html> ... your html here... </html>",
46 |   args: ['arguments', 'for', 'browserify'],
47 |   selector: 'script' // css selector passed to scriptify for it to select elements to browserify
48 | }
49 | 
50 | packify(opts, function(err, packed) {
51 |   console.log(packed.toString())
52 | })
53 | ```
54 | 
55 | ### CLI
56 | 
57 | ```
58 | packify <path-to-html-file>
59 | ```
60 | 
61 | when using on the CLI any additional arguments beyond the HTML file will be passed straight to browserify, e.g. 
62 | 
63 | ```
64 | packify index.html -t brfs
65 | ```
66 | 
67 | will run browserify like `browserify -t brfs`
68 | 
69 | 


--------------------------------------------------------------------------------