关于gulp:Gulp-使用gulp压缩图片

35次阅读

共计 587 个字符，预计需要花费 2 分钟才能阅读完成。

在理论我的项目中，除了 HTML、CSS、JS 等文件，还会用到大量的图片。压缩图片可升高图片文件大小，进步页面关上速度。

如何压缩图片

应用 gulp 来压缩图片能够应用上面两个插件：

gulp-imagemin：压缩率不显著，能够解决多种图片格式，能够引入更多第三方优化插件。
gulp-smushit：压缩率比拟大，只能解决 JPG 和 PNG。

例如咱们所有的图片压缩到 dist 目录下的 image 文件夹中，上面咱们应用 gulp-imagemin 插件来实现图片的压缩，在我的项目中，除了 PNG 和 JPG 格局的图片，也有可能有其余格局的图片。

示例：

首先装置 gulp-imagemin 插件，命令如下所示：

npm install --save-dev gulp-imagemin

插件装置胜利后，咱们就能够在 gulpfile.js 文件中编写代码：

// 获取 gulp
var gulp = require('gulp')
// 获取 uglify 模块
var imagemin = require('gulp-imagemin')
// 压缩图片工作
gulp.task('images', function(cb) {
    // 找到图片
    gulp.src('image/*')
        .pipe(imagemin({progressive: true,}))
        .pipe(gulp.dest('dist/image'))
        cb()})

运行 gulp images 命令：

正文完