Responsive Images
var gulp = require('gulp');
var runSequence = require('run-sequence');
var del = require('del');
var responsive = require('gulp-responsive-images');
var newer = require('gulp-newer');
var util = require('gulp-util');
var config = require('../config');
// Development: Kopiere in den Build-Ordner
gulp.task('images:development', function() {
return gulp.src(config.images.development.src)
.pipe(gulp.dest(config.images.development.dest));
});
// Production: Kopiere in den Build-Ordner
gulp.task('images:production', function() {
return gulp.src(config.images.production.src)
.pipe(gulp.dest(config.images.production.dest));
});
// Development: Führe die Tasks aus
gulp.task('imagesResp', function() {
runSequence('respDest',
['small', 'medium', 'large', 'extra'],
);
});
// Development: Lösche responsive Bilder im Entwicklungs-Build
gulp.task('respDest', function(done) {
del(config.delete.respDest.src, done);
});
// Development: Lösche responsive Bilder im Quellverzeichnis
gulp.task('respSrc', function(done) {
del(config.delete.respSrc.src, done);
});
// Breakpoints
// Development: Small Breakpoint
// https://github.com/dcgauld/gulp-responsive-images
// Die absoluten Maße müssen mit denen in der _config.yml (site.sizes) übereinstimmen!
gulp.task('small', function() {
return gulp.src(config.images.small.src)
.pipe(newer(config.images.small.dest))
.pipe(responsive({
'*.jpg': [{
width: 576
}],
'*.png': [{
width: 576
}]
}))
.pipe(gulp.dest(config.images.small.dest));
});
// Breakpoints
// Development: Medium Breakpoint
// https://github.com/dcgauld/gulp-responsive-images
// Die absoluten Maße müssen mit denen in der _config.yml (site.sizes) übereinstimmen!
gulp.task('medium', function() {
return gulp.src(config.images.medium.src)
.pipe(newer(config.images.medium.dest))
.pipe(responsive({
'*.jpg': [{
width: 720
}],
'*.png': [{
width: 720
}]
}))
.pipe(gulp.dest(config.images.medium.dest));
});
// Development: Large Breakpoint
gulp.task('large', function() {
return gulp.src(config.images.large.src)
.pipe(newer(config.images.large.dest))
.pipe(responsive({
'*.jpg': [{
width: 940
}],
'*.png': [{
width: 940
}]
}))
.pipe(gulp.dest(config.images.large.dest));
});
// Development: Extra Breakpoint
gulp.task('extra', function() {
return gulp.src(config.images.extra.src)
.pipe(newer(config.images.extra.dest))
.pipe(responsive({
'*.jpg': [{
width: 1140
}],
'*.png': [{
width: 1140
}]
}))
.pipe(gulp.dest(config.images.extra.dest));
});