css-bundler

Bundle CSS and assets into a single folder for distributing

css-bundler

Bundle a CSS file and all of its assets into a single directory. This means you don't have to worry about file paths. If you separate you CSS into components, you might run into this problem. You don't want to have to worry about dozens of component folders and paths.

npm install -g css-bundler
css-bundler {input} {output}

A grunt task is included. Load the tasks with grunt.loadNpmTasks('css-bundler') and add some config:

cssbundler: {
  options: {
    prefix: 'foo/bar'
  },
  foo: {
    src: 'src/index.css',
    dest: 'build/build.css'
  }
}

See the grunt docs on Configuring Tasks as it uses the standard Grunt API.

You can create multiple bundles at once using Grunt's dynamic file mapping:

cssbundler: {
  all: {
    files: [{
      expand: true,
      src: ['bundles/**/build.css'],
      dest: 'build',
      ext: '.bundled.css'
    }]
  }
}

This will create multiple bundles and create a build directory in each one with the built bundle. This means you don't need to manually configure each and every bundle.

var Bundler = require('css-bundler');
var bundle = new Bundler({
  // options
});
bundle.build('path/to/file.css', 'path/to/output', function(){
  // Callback
});

Let's say you have a CSS file called index.css:

.foo {
    background: url('path/to/image.png');
}

With the image in the relative directory. You can bundle this into a new directory and file with all of the assets:

css-bundler index.css build/build.css

This will create a build.css file in the build directory relative to the current directory. It will rewrite the paths:

.foo {
    background: url('6edf7858c7afecac61ee6bf5df17f196.png');
}

And it will copy the image to the build directory.