Lego2012
10/12/2016 - 10:50 PM

Responsive Images

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));
});