高效响应的图像吞咽

问题描述：

我试图高效地生成响应图像在网站上使用，但在处理现有文件和路径的时候遇到了一些麻烦。图像驻留在分层结构的文件夹中，其中pages是具有向下递归的多个子文件夹的根，其中大部分都具有图像。高效响应的图像吞咽

我现在的任务是这样的：

gulp.task('responsive', function() { 
    gulp.src('pages/**/*.{jpg,png}') 
    .pipe($.plumber({ 
     errorHandler: function (err) { 
      console.log(err); 
      this.emit('end'); 
     } 
    })) 
    .pipe(responsive({ 
     '**/*.*': [{ 
      width: 2240, 
      suffix: '-2240', 
      quality: 70 
     }, { 
      width: 1920, 
      suffix: '-1920', 
      quality: 70 
     }, { 
      width: 1600, 
      suffix: '-1600', 
      quality: 70 
     }, { 
      width: 1280, 
      suffix: '-1280', 
      quality: 70 
     }, { 
      width: 1280, 
      height: 300, 
      crop: true, 
      gravity: 'Center', 
      suffix: '-thumbwide', 
      quality: 70 
     }, { 
      width: 960, 
      suffix: '-960', 
      quality: 70 
     }, { 
      width: 640, 
      suffix: '-640', 
      quality: 70 
     }, { 
      width: 480, 
      suffix: '-480', 
      quality: 70 
     }, { 
      width: 320, 
      suffix: '-320', 
      quality: 70 
     }] 
    })) 
    .pipe(gulp.dest(function(file) { 
     return file.base; 
    })); 
});

没有与此两个主要问题：

图像被管道输送到同一文件夹作为其来源，他们什么时候最好是在images - 文件夹旁边的文件夹。
如果任务再次运行，它会根据源和先前生成的响应图像生成新文件。

该任务使用gulp-responsive-images，该功能利用GraphicsMagick进行调整大小。我尝试使用gulp-changed（设置为.pipe($.cached('pages'))）来解决问题2，但它似乎没有效果。

如何根据当前设置解决问题1和2？

答

一种解决这两个问题如下：

忽略了一个images -folder的需要。相反，保留一个单独的Source-文件夹整齐排列的原始图像和文本文件。
使用一个临时文件夹来确保整个output-文件夹被正确地重建，响应图像与文本文件一起。

我写a Gist它：

'use strict'; 
var gulp = require('gulp'); 
var gutil = require('gulp-util'); 
var del = require('del'); 
var debug = require('gulp-debug'); 
var $ = require('gulp-load-plugins')(); 

gulp.task('clean:output', function() { 
    gutil.log('Deleting /output/**/*', gutil.colors.magenta('123')); 
    return del([ 
     'output/**/*' 
    ]); 
}); 
gulp.task('build:source', ['clean:output'], function() { 
    gutil.log('Build from /Source', gutil.colors.magenta('123')); 
    return gulp.src(['Source/**/*']) 
    .pipe(debug({title: 'Source:'})) 
    .pipe(gulp.dest('output')); 
}); 

gulp.task('build:responsive', ['build:source'], function() { 
    return gulp.src(['output/**/*.{gif,jpg,jpeg,png}']) 
    .pipe($.cached('responsive')) 
    .pipe($.responsive({ 
     '**/*': [{ 
      width: 2240, 
      height: 320, 
      crop: 'center', 
      rename: { suffix: '-thumbwide' } 
     }, { 
      width: 2240, 
      rename: { suffix: '-2240' } 
     }, { 
      width: 1920, 
      rename: { suffix: '-1920' } 
     }, { 
      width: 1600, 
      rename: { suffix: '-1600' } 
     }, { 
      width: 1280, 
      rename: { suffix: '-1280' } 
     }, { 
      width: 960, 
      rename: { suffix: '-960' } 
     }, { 
      width: 640, 
      rename: { suffix: '-640' } 
     }, { 
      width: 480, 
      rename: { suffix: '-480' } 
     }, { 
      width: 320, 
      rename: { suffix: '-320' } 
     }, { 
      width: 160, 
      rename: { suffix: '-160' } 
     }], 
    }, { 
     quality: 70, 
     progressive: true, 
     withMetadata: false, 
     skipOnEnlargement: true, 
     errorOnUnusedConfig: false, 
     errorOnUnusedImage: false, 
     errorOnEnlargement: false 
    })) 
    .pipe(gulp.dest('responsive')) 
}); 
gulp.task('build:images', ['build:responsive'], function() { 
    gutil.log('Copying responsive images from /responsive to /output', gutil.colors.magenta('123')); 
    return gulp.src('responsive/**/*.{gif,jpg,jpeg,png}') 
    .pipe(debug({title: 'Images:'})) 
    .pipe($.imagemin({ 
     progressive: true, 
     interlaced: true 
    })) 
    .pipe(gulp.dest('output')) 
}); 
gulp.task('clean:responsive', ['build:images'], function() { 
    gutil.log('Deleting /responsive/**/*', gutil.colors.magenta('123')); 
    return del([ 
     'responsive/**/*' 
    ]); 
}); 

gulp.task('default', ['clean:output', 'build:source', 'build:responsive', 'build:images', 'clean:responsive']);

使用packages.json如下：

"devDependencies": { 
    "del": "^2.2.0", 
    "gulp": "^3.9.1", 
    "gulp-cached": "^1.1.0", 
    "gulp-debug": "^2.1.2", 
    "gulp-gitignore": "^0.1.0", 
    "gulp-imagemin": "^2.4.0", 
    "gulp-load-plugins": "^1.2.2", 
    "gulp-responsive": "^2.2.0" 
    }

从Source需要的文件，将它们移动到output，建立与从响应图像output的内容并将它们存储在responsive中，然后应用imagemin并将它们移回output。最后，清理responsive。

高效响应的图像吞咽

相关推荐