Neti Pot Manufacturer

    grunt-sprity

    1.0.0 • Public • Published

    grunt-sprity

    Grunt task for generating css sprites and corresponding stylesheets with sprity.

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

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

    grunt.loadNpmTasks('grunt-sprity');

    The "sprity" task

    Overview

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

    module.exports = function(grunt) {
     
      // Project configuration.
      grunt.initConfig({
        sprity: {
          options: {
            'cssPath': '../images',
            'processor': 'css',
            'orientation': 'vertical',
            'margin': 4
          },
          sprite: {
            options: {
              'style': 'dest/css/sprite.css'
            },
            src: ['src/images/*', 'src/images2/*'],
            dest: 'dest/images/sprite.png',
          },
          base64: {
            options: {
              'base64': true
            },
            src: ['src/images/*'],
            dest: 'dest/scss/base64.css',
          }
        }
      });
     
      // Load the plugin that provides the "sprity" task.
      grunt.loadNpmTasks('sprity');
     
      // Default task(s).
      grunt.registerTask('default', ['sprity']);
    };

    Options

    • src: Array or string of globs to find source images to put into the sprite. [required]
    • out: path of directory to write sprite file to [Default: process.cwd()]
    • base64: inlines base64 encoded sprites in the style file
    • cssPath: path or url of sprites on the web server used to reference the sprite in the styles (relative or absolute path or full url) [Default: ../images]
    • dimension: used dimensions for the sprite. A combination of ratio and dpi. Read more about dimensions: How to specify dimensions
    • engine image processing engine. Read more about engines: Image processing engines [Default: lwip]
    • format output format of the sprite (Depends on what engine is used) [Default: png when used with lwip]
    • name name of sprite file without file extension [Default: sprite]
    • processor style processing module. Read more about style processors: Style processors [css]
    • template output template file, overrides processor option. Read more about templates: Templates
    • style file to write css to, if omitted no css is written
    • background background color of the sprite in hex [Default: #FFFFFF]
    • cachebuster appends a "cache buster" to the background image in the form "?<...>" (Boolean) [Default: false]
    • margin margin in px between tiles [Default: 4]
    • opacity background opacity (0 - 100) of the sprite. defaults to 0 when png or 100 when jpg [Default: 0]
    • orientation orientation of the sprite image (vertical|horizontal|binary-tree) [Default: vertical]
    • prefix prefix for the class name used in css (without .)
    • no-sort disable sorting of layout. Read more about: Layout algorithms
    • split create sprite images for every sub folder [Default: false]
    • style-indent-char Character used for indentation of styles (space|tab) [Default: space]
    • style-indent-size Number of characters used for indentation of styles [Default: 2]

    More

    See sprity documentation

    Install

    npm i grunt-sprity

    DownloadsWeekly Downloads

    6

    Version

    1.0.0

    License

    none

    Last publish

    Collaborators

    • aslansky