npm包gulp-image-data-uri使用教程

什么是gulp-image-data-uri

gulp-image-data-uri是一款基于gulp的插件，它可以将图片转换成data-uri编码格式，方便在网页中使用。

如何使用gulp-image-data-uri

安装gulp-image-data-uri

使用npm进行安装：npm install gulp-image-data-uri

使用gulp-image-data-uri

在gulpfile.js中引入gulp和gulp-image-data-uri插件，然后创建一个gulp任务：

const gulp = require('gulp');
const image_data_uri = require('gulp-image-data-uri');

gulp.task('dataUri', function() {
  return gulp.src('images/*.{png,jpg,jpeg,gif}')
    .pipe(image_data_uri())
    .pipe(gulp.dest('dist'));
});

上述代码中，gulp.task()函数用于创建一个gulp任务，函数的第一个参数是任务名称，第二个参数是任务函数。

使用gulp.src()选择要处理的图片，使用pipe()管道运算符将图片传递给image_data_uri()函数，然后使用gulp.dest()将处理后的图片输出到dist目录中。

在终端中执行gulp命令，即可执行dataUri任务：

gulp dataUri

执行成功后，在dist目录中可以看到图片已经被转换成data-uri编码格式。

参数配置

除了默认配置外，gulp-image-data-uri还提供了一些参数供用户进行配置：

• filter：用于筛选要处理的图片。默认值：'**/*.{png,jpg,jpeg,gif}'。
• maxFileSize：限制文件大小（以字节为单位）。默认值：0（不限制文件大小）。
• maxUriLength：限制data-uri编码后的字符长度。默认值：0（不限制字符长度）。
• verbose：详细输出日志。默认值：false。

可以通过修改任务函数，传递参数进行配置：

gulp.task('dataUri', function() {
  return gulp.src('images/*')
    .pipe(image_data_uri({ filter: '**/*.png', maxFileSize: 1024 }))
    .pipe(gulp.dest('dist'));
});

应用案例

以一张png格式的图片为例，该图片的大小为1.7KB，分别使用gulp-imagemin和gulp-image-data-uri进行处理，比较两种方法得到的图片大小和加载时间：

• 使用gulp-imagemin压缩图片：

const gulp = require('gulp');
const imagemin = require('gulp-imagemin');

gulp.task('imagemin', function() {
  return gulp.src('images/image.png')
    .pipe(imagemin())
    .pipe(gulp.dest('dist'));
});

通过imagemin优化后，图片大小为1.6KB，在页面中加载时间为80ms。

• 使用gulp-image-data-uri将图片转换成data-uri编码格式：

const gulp = require('gulp');
const image_data_uri = require('gulp-image-data-uri');

gulp.task('dataUri', function() {
  return gulp.src('images/image.png')
    .pipe(image_data_uri())
    .pipe(gulp.dest('dist'));
});

通过data-uri优化后，图片的大小变为1.9KB，在页面中加载时间为20ms。

从数据上看，使用gulp-imagemin进行图片压缩，可以使得图片大小更小，但是在加载时间上相对较慢；而使用gulp-image-data-uri将图片转换成data-uri编码格式，可以使得图片加载时间更快，但是在图片大小上相对较大。

总结

gulp-image-data-uri插件可以将图片转换成data-uri编码格式，方便在网页中使用。通过对gulp-image-data-uri的参数配置，可以对图片进行更细致的控制。在实际应用中，根据图片大小和加载时间的需要，可以综合选择gulp-image-data-uri和gulp-imagemin进行图片优化。

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcc2eb5cbfe1ea0612700