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.
Installation
npm install -g css-bundler
Usage
Command Line
css-bundler {input} {output}
Grunt
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.
Dynamic Bundles
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.
Programmatically
var Bundler = require('css-bundler');
var bundle = new Bundler({
// options
});
bundle.build('path/to/file.css', 'path/to/output', function(){
// Callback
});
Example
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.