Bundles all SCRIPT tags with a data-bundle="true"
attribute and replaces
them with the resulting bundle file. Works for local and remote files.
npm run prod
- htmlSourceFile (index.html)
- htmtDestinationFile (index-prod.html)
- 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
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.
- 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.
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.
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>