Minifies and combines css files using prettyugly module. The only difference is it doesn't optimize the css rules like grunt-cssshrink.
This plugin requires Grunt ~0.4.5
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install grunt-prettyugly --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-prettyugly');
In your project's Gruntfile, add a section named prettyugly
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
prettyugly: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
Type: String
Default value: ''
The separator to add in between merged css files. Optional.
Type: String
Default value: ''
This is text that will be added to the beginning of the file. i.e. The header.
Type: Boolean
Default value: FALSE
By default grunt-prettyugly minifies css files. Specifiy this option as true to prettify css files instead.
In this example, the default options are used to minify and join styles1.css
and styles2.css
. So if the styles1.css
file has the content h1{color:#fff;}
and the styles2.css
file had the content p{padding:2em;}
, the generated result would be h1{color:#fff}p{padding:2em}
grunt.initConfig({
prettyugly: {
options: {},
files: {
'dest/default_options.css': ['src/styles1.css', 'src/styles2.css'],
}
}
});
In this example, custom options are used to join and minify styles1.css
and styles2.css
. In this case the separator and banner option were used. So if the styles1.css
file has the content h1{color:#fff;}
and the styles2.css
file had the content p{padding:2em;}
, the generated result in this case would be /* This is a banner */h1{color:#fff}/* --- */p{padding:2em}
grunt.initConfig({
prettyugly: {
options: {
separator: '/* --- */',
banner: '/* This is a banner */',
},
files: {
'dest/default_options': ['src/testing', 'src/styles2.css'],
}
}
});
Here, styles1.css
and styles2.css
are minified to their own separate files. It gets all files that end with .css
and aren't .min.css
in the current directory. The created files (styles1.min.css
and styles2.min.css
) are placed in the /temp/
directory.
grunt.initConfig({
prettyugly: {
minify_separate : {
expand: true,
cwd : '/',
src : ['*.css', '!*.min.css'],
dest : 'tmp/',
ext : '.min.css',
extDot : 'first'
}
}
});
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.
(Nothing yet)