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'
           }]
        }

    }

  })