Combine style-tags and CSS-files linked by HTML-file into one or several files or style-tags.
Grunt plugin for uniator
This plugin requires Grunt >=0.4.0
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-uniator --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-uniator');
The uniator
task is multi task.
In your project's Gruntfile, add a section named uniator
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
uniator: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
}
}
});
The supported options are equal to settings that can be passed into uniator.collectCssInFile()
(see uniator API for details).
The most important options are mentioned below.
Type: String
Default value: style
Base of name of file into which collected styles will be saved.
Should not contain an extension.
Can contain path, for example path/to/collected
.
Type: String
Default value: directory of source HTML-file
Path to directory relative to which files should be created.
Type: String
Default value: utf8
Encoding of source files.
Type: Boolean
Default value: false
Whether collected styles should be included into contents of HTML-file.
Type: Boolean
| Object
Default value: false
Whether collected styles should be minified.
Object as option value can be used to specify options for minification (see How to use clean-css programmatically?).
Type: Boolean
Default value: false
Whether collected source CSS-files should be removed.
Type: Array
| String
A CSS-file or list of CSS-files that should not be collected.
Each file can be specified by name or by path.
If file has .css
extension the extension can be omitted.
Type: Boolean
| Function
Default value: false
Whether URLs found in CSS-files should be updated to be accessible from destination file. A function can be used as the option value. In the latter case the function will be called instead of predefined function to get new URL. If the function returns a string value, that value will be used as new URL. A non-string value returned by the function will be ignored (i.e. the source URL will not be changed). Data object will be passed into the function (see getUpdatedUrl for details).
grunt.initConfig({
uniator: {
combine: {
src: ["path/to/source/index.html"]
}
}
});
Combine and minify all styles from HTML-file, save styles into path/to/out/css/combined.css
, update URLs in result CSS-file, create new HTML-file path/to/out/processed.html
, remove source CSS-files
grunt.initConfig({
uniator: {
combine_minify: {
options: {
cssFile: "css/combined",
destDir: "path/to/out",
minifyCss: true,
removeSourceFile: true,
updateUrl: true
},
src: ["source.html"],
dest: "path/to/out/processed.html"
}
}
});
Combine and minify all styles from HTML-file besides plugins.css
and controls.css
, include styles into source HTML-file
grunt.initConfig({
uniator: {
combine_minify_include: {
options: {
include: true,
minifyCss: true,
skipCssFile: ["plugins", "controls"]
},
src: ["index.html"]
}
}
});
If you need more advanced control over files combining, try one of the following plugins/tools:
- processhtml - Grunt plugin
- usemin - Grunt plugin
- useref - Grunt plugin
- HTML Builder - Grunt plugin
- Solidify - CLI tool
Also you may find useful:
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.
-
0.1.0 / 2016-03-21
- Add support for Grunt 1.0.
-
0.0.3 / 2014-05-05
- Update uniator package to 0.0.3
-
0.0.2 / 2014-02-20
- Update uniator package to 0.0.2
- Add
release
tasks in Gruntfile
Copyright (c) 2014-2016 Denis Sikuler
Licensed under the MIT license.