關於gulp入門之圖片壓縮

一、gulp中的圖片壓縮。

　　最初使用gulp-imagemin做測試。明明配置沒問題，但是壓縮的時候就會報錯，具體原因在哪兒沒找到，有可能是因為插件版本或者node版本的問題。於是改用第二個插件：gulp-tinypng-nokey

二、關於各個插件的對比

　　1、需要的插件包：npm install –save-dev gulp gulp-imagemin gulp-tinypng-compress gulp-tinypng-nokey

　　2、相關配置：

var gulp = require("gulp"),
    imagemin = require('gulp-imagemin'),              //壓縮圖片1
    tinypng = require('gulp-tinypng-compress'),       //壓縮圖片2 需要有KEY,下面有將怎樣獲取KEY值
    tinypng_nokey = require('gulp-tinypng-nokey'),    //壓縮圖片3 免費
    runSequence = require('run-sequence');


//圖片壓縮1 (感覺壓縮程度不夠)
gulp.task('compress_img', function () {
    gulp.src('redbaby/public/images/redbaby/*.{png,jpg,jpeg,gif,ico}')
        .pipe(imagemin({
            optimizationLevel: 5, //類型：Number  默認：3  取值范圍：0-7（優化等級）
            progressive: true,    //類型：Boolean 默認：false 無損壓縮jpg圖片
            interlaced: true,     //類型：Boolean 默認：false 隔行掃描gif進行渲染
            multipass: true       //類型：Boolean 默認：false 多次優化svg直到完全優化
        }))
        .pipe(gulp.dest('gulptest/yes/img'))
});

//壓縮圖片2 (需要有KEY,並且每個月只有500張)
gulp.task('tinypng', function() {
    gulp.src('redbaby/public/images/redbaby/*.{png,jpg,jpeg,gif,ico}')
        .pipe(tinypng({
            key: '**************',
            sigFile: 'gulptest/yes/img/.tinypng-sigs',
            log: true
        }))
        .pipe(gulp.dest('gulptest/yes/img'));
})

//壓縮圖片3 (免費 常用)
gulp.task('tp', function() {
    gulp.src('redbaby/public/images/redbaby/*.{png,jpg,jpeg,gif,ico}')
        .pipe(tinypng_nokey ())
        .pipe(gulp.dest('gulptest/yes/img'));
})

gulp.task('build', function (done) {
    condition = false;
    runSequence(
        'compress_img',
        'tinypng',
        'tp',

    done);
});

三、壓縮對比

　　見於https://blog.csdn.net/x550392236/article/details/78017346

四、其他gulp相關

 

1. gulp 給靜態資源文件添加hash(md5)后綴 防止緩存
2. gulp-connect實現頁面實時自動刷新
3. gulp-imagemin、gulp-tinypng-compress、gulp-tinypng-nokey圖片壓縮優化詳解及對比
4. https://blog.csdn.net/x550392236/article/details/77117023