1. 程式人生 > >CocosCreator和gulp-使用tinypng批量壓縮圖片

CocosCreator和gulp-使用tinypng批量壓縮圖片

上篇文章介紹瞭如何用gulp-imagemin外掛來自動批量壓縮CocosCreator專案的圖片資源,imagemin雖然使用方便且免費,但缺點也很明顯,就是耗時長而且壓縮比不高(壓縮後大概比原圖小10-15%)。

其實還有一個更牛的壓縮神器,叫 tinypng(官網: https://tinypng.com/),它的壓縮比可以達到驚人的50-70%,且基本無損。
tinypng的使用方式有很多種,有桌面應用程式、Web方式(直接在瀏覽器中選擇圖片),也有PhotoShop外掛。不過這些都收費,當然也可免費申請試用。它的壓縮過程是把圖片通過https方式上傳到tinypng伺服器進行壓縮,然後再下載回來。

這裡要介紹的是tinypng官方提供的gulp外掛,但使用時必須有KEY,這個KEY也可以在官網上免費申請,但免費的只能每月壓縮500張圖片。

安裝 tinypng 外掛

在專案根目錄輸入命令

$ npm install gulp-tinypng-compress -save-dev

編寫任務

var gulp = require("gulp");
var tinypng = require('gulp-tinypng-compress');

gulp.task('tinypng', function (cb) {
    gulp.src('./build/web-mobile/**/*.{png,jpg,jpeg}'
) .pipe(tinypng({ key: 'xxxx', sigFile: './build/.tinypng-sigs', log: true })) .pipe(gulp.dest("./build/web-mobile/")) .on("end", cb); });

注意:上面程式碼中的key值,必須是自己從tinypng官網申請的有效key,否則執行會報錯。

官網申請地址https://tinypng.com/developers

執行任務

$ 
gulp tinypng

結果

輸入和輸出目錄都是 ./build/web-mobile,通過資料夾大小的前後對比,可以看到,壓縮後通常能小50%以上。