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

1. Install the package globally:

$ npm install -g autopack

3. CD to your projects directory and create a configuration file.

$ cd my_project
$ autopack init

3. 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

module.exports = {
  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.js
mySettings = {background:'#fff'};

//main.js
function start(){
  console.log(mySettings.background);
}

<script src="settings.js"/>
<script> mySettings.background = '#000'; </script>
<script src="main.js"/>

The packed version can result in the following HTML:

<script> mySettings.background = '#000'; </script>
<script src="bundle.js"/>

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:

<script src="settings.js">
<script>
window.onload = function(){ mySettings.background = '#000'; start(); }
</script>
<script src="main.js">

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