高效響應的圖像吞嚥

Question

我試圖高效地生成響應圖像在網站上使用，但在處理現有文件和路徑的時候遇到了一些麻煩。圖像駐留在分層結構的文件夾中，其中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; 
    })); 
}); 

沒有與此兩個主要問題：

1. 圖像被管道輸送到同一文件夾作爲其來源，他們什麼時候最好是在images - 文件夾旁邊的文件夾。
2. 如果任務再次運行，它會根據源和先前生成的響應圖像生成新文件。

該任務使用gulp-responsive-images，該功能利用GraphicsMagick進行調整大小。我嘗試使用gulp-changed（設置爲.pipe($.cached('pages'))）來解決問題2，但它似乎沒有效果。

如何根據當前設置解決問題1和2？

Answer 1

一種解決這兩個問題如下：

1. 忽略了一個images -folder的需要。相反，保留一個單獨的Source-文件夾整齊排列的原始圖像和文本文件。
2. 使用一個臨時文件夾來確保整個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。