美文网首页
【四】gulp之用gulp-imagemin压缩图片

【四】gulp之用gulp-imagemin压缩图片

作者: 小枫学幽默 | 来源:发表于2017-02-15 17:04 被阅读488次

    如何用````gulp```压缩图片?

    目录结构如下:

    Paste_Image.png
    • 1)在命令行进入gulpDay4目录安装所需插件 gulp-imagemin
    npm install gulp-imagemin
    
    • 2)新建gulpfile.js 写入以下代码(具体解释见代码注释)
    //引用gulp
    var gulp = require('gulp'),
    //引用我们要用的gulp-imagemin
      imagemin = require('gulp-imagemin');
    //建立一个imagemin任务 直接可以用 gulp imagemin就可以执行这个任务
    gulp.task('imagemin', function() {
      gulp.src('develop/images/*.{png,jpg,gif,ico}')
            .pipe(imagemin())
            .pipe(gulp.dest('dist/img'));//输入压缩完成的图片到dist目录
    });
    
    • 3)运行任务
    Paste_Image.png

    说明:最后显示已经压缩17个图片文件,节约了321Kb空间

    • 4)查看压缩结果
    Paste_Image.png

    gulp-imagemin的npm地址

    gulp-imagemin插件文档
    这个插件可以压缩很多图片文件,例如:PNG, JPEG, GIF 、SVG
    更多插件配置等,请自行查看文档研究。

    注:本系列文章只做简单入门,深入了解请自行修行。

    相关文章

      网友评论

          本文标题:【四】gulp之用gulp-imagemin压缩图片

          本文链接:https://www.haomeiwen.com/subject/pyvqwttx.html