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

特别声明:小站对部分原创文章已开启付费阅读,并开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

这是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.htmljordan shoes for sale outlet paypal

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

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部