node package manager
Orgs are free. Discover, share, and reuse code in your team. Create a free org »

grunt-imgs-sprite

grunt-imgs-sprite

imgs sprite

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-imgs-sprite --save-dev

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

grunt.loadNpmTasks('grunt-imgs-sprite');

The "imgs_sprite" task

Overview

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

grunt.initConfig({
    // Configuration to be run (and then tested). 
    imgs_sprite: {
        options: {
            // sprite背景图源文件夹,只有匹配此路径才会处理,默认 images/sprite/ 
            imagepath: 'test/images/',
            // 雪碧图输出目录,默认images/ 
            spritedest:'test/sprite',
            // 替换后背景路径,默认 ../images/ 
            spritepath:"../sprite",
            // 个图片间间距,如果设置为奇数,会强制+1以保证生成的2x图片为偶数宽高,默认 0 
            padding:2
        },
        autoSprite:{
           files : [{
               //启用动态扩展 
               expand:true,
               // css文件源的文件夹 
               cwd:"test/css",
               // 匹配规则 默认匹配源文件夹底下的所有css文件 
               src:"**/*.css",
               // 导出css的路径 
               dest:"test/build/css",
               //导出文件的扩展名,默认与源文件一致 
               ext:'.css'
           }]
        }
 
    }
 
  })