grunt-color-overlay v0.1.0

grunt-colorOverlay

change color of single-color icons(改变单色图标的颜色，不需要导出几套颜色图片，想要什么颜色随心变)

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

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

grunt.loadNpmTasks('grunt-colorOverlay');

windows用户务必安装ImageMagick.exe文件，因为npm安装的imageMagick只是个调用exe程序的包装器，例如本人安装的是ImageMagick-6.9.3-6-Q16-x64-dll. 官网有下载。

The "colorOverlay" task

Overview

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

grunt.initConfig({
  colorOverlay: {
    default_option: {
      options: {
        color: 'red'
      },
      files: {
        'tmp/red/': ['test/icons/*.png']
      }
    }
  }
});

Options

options.color

Type: String Default value: ''

必须参数，希望图标叠加的颜色值，可以是支持各种颜色格式，包括颜色关键字

options.filenameMap

Type: Function Default value: function(filename) { return filename; }

对文件名进行处理，返回新的文件名

Usage Examples

grunt.initConfig({
  colorOverlay: {
    red: {
      options: {
        color: 'red'
      },
      files: {
        'tmp/red/': ['test/icons/*.png']
      }
    },
    blue: {
      options: {
        color: '#00A1F2',
        filenameMap: function(filename) {
          // 和下面的任务使用同一个文件夹，但是名称不一样
          return 'blue.' + filename;
        }
      },
      files: {
        'tmp/mixed/': ['test/icons/*.png']
      }
    },
    disabled: {
      options: {
        color: '#C1C6D2',
        filenameMap: function(filename) {
          return 'disabled.' + filename;
        }
      },
      files: {
        'tmp/mixed/': ['test/icons/*.png']
      }
    }
  }
});

上面例子3个任务，分别对原图片转换成红色，蓝色以及灰色三套图标。其中红色任务在red文件夹下面，图片文件名称和原来的一样；蓝色和禁用任务放在同一个名为mixed的文件夹，但是，通过文件名称进行区分，分别是blue.和disabled.前缀。

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)