Gulp系列教程：图片转换成Base64编码

作者：Blueed 日期：2015-12-27 点击：3133
Gulp系列教程
gulp
workflow
工作流

这是Gulp系列教程的第七部分。今天我会使用Gulp.js来把小图片的URL替换为Base64编码图片。

BASE64编码图片

由build任务执行的最后一个任务是把CSS文件中的小图片替换为Base64编码文件。通过这种方式把图片嵌入CSS文件中减少额外请求。如果图片不大这种做法会大大加快页面载入速度。

我在网页上用了很多小尺寸图案因为我很不喜欢扁平化设计方法。现实世界不是扁平的。几乎找不到扁平的地方。总是存在结构，图案，阴影和光线。我使用的图案来自超棒的网站Subtle Pattern。它们有接近一百个非常棒的图案。

载入背景图案的SCSS如下：

%pattern-light-grey {
  background-color: $background-color;
  background-image: url('/assets/images/patterns/light_grey.png');
  background-size: 301px 621px;
}

body {
  @extend %pattern-light-grey;
}

生成的CSS如下：

body {
  background-color: #fdfdfd;
  background-image: url("/assets/images/patterns/light_grey.png");
  background-size: 301px 621px;
}

任务运行后，CSS如下：

body {
  background-color: #fdfdfd;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAloAAATaBAMAAAB4FdU7AAAAFVBM...);
  background-size: 301px 621px;
}

这个任务依赖另一个Gulp.js插件

$ npm install --save-dev gulp-base64@0.1.2

添加一个新配置并创建任务：

//gulp/config.js 

base64: {
  src: developmentAssets + '/css/*.css',
  dest: developmentAssets + '/css',
  options: {
    baseDir: build,
    extensions: ['png'],
    maxImageSize: 20 * 1024, // bytes
    debug: false
  }
}

我只替换了小于20KB的PNG。这样高分辨率图不会嵌入CSS中。

// gulp/tasks/development/base64.js

var gulp   = require('gulp');
var base64 = require('gulp-base64');
var config = require('../../config').base64;

/**
 * Replace urls in CSS fies with base64 encoded data
 */
gulp.task('base64', ['sass'], function() {
  return gulp.src(config.src)
    .pipe(base64(config.options))
    .pipe(gulp.dest(config.dest));
});

现在我们完成了build任务。

源代码

在GitHub上查看源码

总结

我这是Gulp系列教程的第七部分的总结。我们学习了如何把PNG图片复制替换为Base64编码的图片。并且我们完成了build任务。

本文根据@Stefan Imhoff的《Introduction to Gulp.js 7: Base64 Encoded Images》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处：http://stefanimhoff.de/2014/gulp-tutorial-7-base64/。

Blueed

现居上海。正在学习前端的道路上，欢迎交流。个人博客：Blueed.me,微博：@Ivan_z3

如需转载，烦请注明出处：http://www.w3cplus.com/workflow/gulp-tutorial-7-base64.html

返回顶部