grunt-backgrounds

Create or remove auto background CSS description (computed with data-snippet="BKG" HTML attribute).

Getting Started

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-backgrounds --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-backgrounds');

The "backgrounds" task

Overview

In your project's Gruntfile, add a section named backgrounds to the data object passed into grunt.initConfig().

grunt.initConfig({
  backgrounds: {
		compute: {	//options for computing method
			src: ['public_html/*.html'],																//file list to take
			options: {
				placeholder: "##BACKGROUND##",															//placeholder to put in HTML file where to put CSS definitions
				normal_display_tpl: "\t#[[ID]]{ background-image:url('images/[[FILE]].png'); }\n",		//template CSS line for a normal display background
				retina_display_tpl: "\t\t#[[ID]]{ background-image:url('images/[[FILE]]@x2.png'); }\n",	//template CSS line for a retina display background
				retina_header_tpl: "\n\t@media screen and (-webkit-min-device-pixel-ratio: 1) {\n",		//template CSS line to add BEFORE retina display CSS declaration
				retina_footer_tpl: "\t}\n",																//template CSS line to add AFTER retina display CSS declaration
				HEADER: "/*BACKGROUND_BEGIN*/",															//tag inserted BEFORE CSS declaration to find CSS block to remove
				FOOTER: "/*BACKGROUND_END*/",															//tag inserted AFTER CSS declaration to find CSS block to remove
				file_name_pattern: "(?:public_html/)(.*)(?:\.html)",									//file pattern where $1 is used to name picture
				slide_background_div_id : "screen-container"											//special id used to define slide's background (no id used)
			}
		},
		remove: {
			src: ['public_html/*.html'],
			options: {
				...same options as compute
			}
		}
	},
});

Contributing

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.

Release History

(Nothing yet)