gulp

画像一括軽量化(gulp-tinypng-compress)

More than 1 year has passed since last update.


gulp-tinypng-compress


  • APIの使用回数(1ヶ月につき):500画像 無料

  • 5MB以上の画像は圧縮できない。

  • gif画像は圧縮できない。

  • API keyが必要。(https://tinypng.com/developers)
    から登録し取得する。API keyをgulpfile.jsに記述する。

https://www.npmjs.com/package/gulp-tinypng-compress


設定

スクリーンショット 2016-09-26 13.02.21.png

$ npm install


gulp-tinypng-compressをインストールしていない場合インストールする。

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


実行する


  • src内に画像を配置する

$ gulp tinypng


  • imagesに軽量化された画像が出力される

スクリーンショット 2016-09-26 11.34.34.png


軽量化サンプル


1.png 1.2M→369KB

1.png

1.png



2.jpg 20KB→16KB

2.jpg

2.jpg


サンプルソース


package.json



{
"name": "sample-project",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"browser-sync": "^2.16.0",
"gulp-autoprefixer": "^3.1.1",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0",
"gulp-tinypng-compress": "^1.2.1"
}
}


gulpfile.js


var gulp = require('gulp');
var sass = require('gulp-sass');
var browser = require("browser-sync");
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var tinyping = require('gulp-tinypng-compress');

gulp.task('default',['server'],function() {
gulp.watch('htdocs/sass/*.scss', ['sass']);
});
gulp.task('sass',function () {
gulp.src('htdocs/sass/*.scss')
.pipe(sourcemaps.init())
.pipe(sass())
.pipe(autoprefixer("last 2 version", "ie 8", "ie 7"))
.pipe(sourcemaps.write('../maps'))
.pipe(gulp.dest('htdocs/css/'))
.pipe(browser.reload({stream:true}));
});

gulp.task("server", function() {
browser({
server: {
baseDir: "htdocs/"
}
});
});

gulp.task('tinypng', function () {
gulp.src('htdocs/images/src/**/*.{png,jpg,jpeg}')
.pipe(tinyping({
key: '*****'// TinyPNGのAPI Keyを入力
}))
.pipe(gulp.dest('htdocs/images'));
});