grunt-image-embed変換css内のピクチャ

npm install grunt-image-embed

Documentation

This task has two required properties,  src  and  dest .  src  is the path to your stylesheet and  dest  is the file this task will write to (relative to the grunt.js file). If this file already exists it will be overwritten.
An example configuration looks like this:

grunt.initConfig({
  imageEmbed: {
    dist: {
      src: [ "css/styles.css" ],
      dest: "css/output.css",
      options: {
        deleteAfterEncoding : false
      }
    }
  }});

Optional Configuration Properties

ImageEmbed can be customized by specifying the following options:

maxImageSize : The maximum size of the base64 string in bytes. This defaults to  32768 , or IE8's limit. Set this to  0  to remove the limit and allow any size string.

baseDir : If you have absolute image paths in your stylesheet, the path specified in this option will be used as the base directory.

deleteAfterEncoding : Set this to true to delete images after they've been encoded. You'll want to do this in a staging area, and not in your source directories. Be careful.

Skipping Images

Specify that an image should be skipped by adding the following comment directive after the image:

background: url(image.gif); /*ImageEmbed:skip*/

 

grunt-inline-imgbase 64ピクチャ変換

npm install grunt-inline-imgbase64

Usage Examples

次の例ではhtmlとcssファイル内のimageUrlをインラインします.ローカルファイルとリモートファイルをサポートします.

inline_imgbase64: {
        options:{
            exts:['jpg','jpeg','png','gif'], //         
            tag:'__inline', //      ，     imageUrl     
            maxLength:40 //           ，      maxLength    ，  KB
        },
        dist: {
            src: ['test/dist/*.*'],
            dest: ['tmp/']
        }
    }