Extracter

Bundles all SCRIPT tags with a data-bundle="true" attribute and replaces them with the resulting bundle file. Works for local and remote files.

Usage

npm run prod

Command line arguments

1. htmlSourceFile (index.html)
2. htmtDestinationFile (index-prod.html)
3. jsBundleFile (bundle.js)

So if you want to bundle the scripts in your index.html file to itself with bundle script bundle-prod.js you would use:

npm run prod index.html index.html bundle-prod.js

Attributes

You can change some behaviour with attributes:

• Only script tags with data-bundle="true" will be bundled
• Script tags with data-production-src will be bundled with the value of this attribute. So can be used to specify the minified version of a script.

Workflow

• Just use good old SCRIPT tags for your scripts
• Make use of development files
• When going to production, run the extracter on the production server.

Notes

BASE element

The BASE element makes the browser resolve relative URL's to the href value of the BASE element. This bundler does not take this element into account. Instead it resolves all URL's relative to the current directory where you run the script. Normally this won't be an issue, but if it is, you can just specify the data-production-src for files that would otherwise be resolved in error.

Order of files

Make sure the script tags to bundle are together and no no-bundle file is between them.

Not valid:

This is not valid, as it would split the bundle in two (will be possible in a next version).

<script data-bundle="true" src="app.js"></script>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script data-bundle="true" src="lib.js"></script>

Valid:

<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>
<script data-bundle="true" src="app.js"></script>
<script data-bundle="true" src="lib.js"></script>

Valid:

<script data-bundle="true" src="app.js"></script>
<script data-bundle="true" src="lib.js"></script>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>

Valid:

<script src="jquery.js"></script>
<script data-bundle="true" src="app.js"></script>
<script data-bundle="true" src="lib.js"></script>
<script src="jquery-ui.js"></script>