gulp-image-handler

处理 CSS 中引用的本地图片，支持：

• 上传至服务器并更新 URL
• 转化为 base64 格式

Install

npm i --save-dev gulp-image-handler

Usage

const gulp = require('gulp');
const handleImage = require('gulp-image-handler');
 
gulp.task('less', function() {
  return gulp.src('./**/*.css')
    .pipe(handleImage())     // 图片处理
    .pipe(gulp.dest('dist'));
});

搭配 LESS 一起使用

const gulp = require('gulp');
const less = require('gulp-less');
const handleImage = require('gulp-image-handler');
 
gulp.task('less', function() {
  return gulp.src('./**/*.less')
    .pipe(less())       // LESS 编译
    .pipe(handleImage())     // 图片处理
    .pipe(gulp.dest('dist'));
});

API

handleImage([option])

• option 选项

  • threshold

    转化 bsae64 阈值, 默认为 1024 (Bytes)

    .pipe(handleImage({
        threshold: 2 * 1024,    // 小于等于 2KB 的图片转化为 base64
    }))

  • compress

    图片上传时是否压缩，默认为 true

    .pipe(handleImage({
        compress: true,    // 上传时进行压缩
    }))