gulp

ロスレス圧縮(gulp-imagemin)

More than 1 year has passed since last update.


画像ロスレス圧縮(gulp-imagemin)

https://www.npmjs.com/package/gulp-imagemin


  • JPEG,PNG,GIF,SVGをロスレス(画質劣化なし)で軽量化できる

参考:

http://dev.classmethod.jp/client-side/javascript/gulp-solo-adv-cal-12/

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

$ npm install


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

$ npm install gulp-imagemin --save-dev


実行する


  • src内に画像を配置する


$ gulp imagemin


  • imagesに画像が出力される

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


サンプル


1.png 1.2M→1.2M

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-imagemin": "^3.0.3",
"gulp-sass": "^2.3.2",
"gulp-sourcemaps": "^1.6.0",
"imagemin-jpegtran": "^5.0.2",
"imagemin-optipng": "^5.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 imagemin = require("gulp-imagemin");

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( 'imagemin', function(){
var srcGlob = 'htdocs/images/src/**/*.+(jpg|jpeg|png|gif|svg)';
var dstGlob = 'htdocs/images/';

var imageminOptions = {
optimizationLevel: 7
};
gulp.src( srcGlob )
.pipe(imagemin( imageminOptions ))
.pipe(gulp.dest( dstGlob ));
});