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)