Get your scripts together
AutoPack runs through all the JavaScript and CSS references in your HTML file and spits out an HTML file that only loads one bundled and minimized .css and .js file. It also copies other files you specify into your build directory. Everything is configurable; AutoPack can also do nothing at all if you want it to.
AutoPack is still in heavy development. Please file any bugs you find and/or contribute.
Usage
Command Line usage
- Install the package globally:
$ npm install -g autopack
- CD to your projects directory and create a configuration file.
$ cd my_project$ autopack init
- Run
autopack
$ autopack
CLI Flags
Run autopack
in your console with the following optional flags.
Flag | Description |
---|---|
--autopackfile , --config |
Specify the location of the autopackfile. |
--cwd |
Change the current working directory. |
-i , --input |
The HTML file you want AutoPack to work on. |
-o , --output |
The directory you want AutoPack to save the converted files to. |
CLI Commands
Command | Description |
---|---|
autopack |
Run autopack |
autopack init |
Create an autopackfile in the current directory. |
API usage (i.e. in a build process) Needs further testing
Configuration
You can configure AutoPack by creating a file named autopackfile.js in the root directory of your project. The default configuration looks like this:
pack: html: name: 'index.html' //name of the resulting html file, will be same as entry file if omitted minify: false //set to true if you want to minify the resulting html js: //either set to true to use the defaults or use an object name: 'bundle.js' //name of the resulting concatenated javascript local: concat:true //add local javascript file references to the bundled file minify:true //minify local javascript files inline: concat:false //add inline javascript to the bundled file minify:false //minify inline javascript exclude: // filenames, urls or dom-selectors of elements you want to exclude from the process, append: 'body' // selector of element where you want to append the bundle script tag to css: //either set to true to use the defaults or use an object name: 'style.css' //name of the resulting concatenated css local: concat:true //add local css file references to the bundled file minify:true //minify local css files inline: concat:false //add inline css to the bundled file minify:false //minify inline css append: 'head' // selector of element where you want to append the bundle css tag to exclude: // filenames, urls or dom-selectors of elements you want to exclude from the process copy: //files found under these patterns will be copied into the output directory remove: // filenames, urls or dom-selectors of elements you want to remove from the resulting html
Example autopackfile
moduleexports = entry: 'index.html' output: 'build' pack: html: name: 'index.html' minify: false css: name: 'style.css' local: concat: true minify: true inline: concat: false minify: true js: name: 'bundle.js' local: concat: true minify: true inline: concat: false minify: true exclude: 'scripts/settings.js' //files found under these patterns will be copied into the output dir copy: 'images/**' '**/*.gif' 'fonts/*.ttf' 'fonts/*.woff' 'fonts/*.otf' //These resources/elements will be removed from the html code remove:'http://localhost:35729/livereload.js' '#dev-info' 'debug.css';
Known Issues
AutoPack is still a work in progress. Don't expect it to work rightaway in your project. If you find any issues please report them.
Script dependency
AutoPack can alter the order in which scripts are executed if for example only local scripts are being concatenated. This can result in problems with dependencies in inline scripts. Consider the following scenario:
//settings.jsmySettings = background:'#fff';
//main.js{ console;}
The packed version can result in the following HTML:
Now the inline script is not able to find the variable mySettings
(which is being set in settings.js
). To get rid of problems like this either append the resulting JavaScript file before the inline script or add additional logic to run the script after everything is loaded:
Version History
- 0.1.2
- FIXED: CSS concatenation caused an issue in IE.
- 0.1.1
- FIXED: Parse Error when concatenating files.
- 0.1.0 Initial Release