nodejs grunt 圖片轉換 插件

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-imgbase64 圖片轉換

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

 

转载于:https://my.oschina.net/homeemail/blog/373877