gulp 的高效响应图像

Question

我正在尝试高效地生成用于网站的响应图像，但在处理 gulp 中的现有文件和路径时遇到了一些问题。图片位于分层结构的文件夹中，其中 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, which leverages GraphicsMagick for the resizing. I tried using gulp-changed（设置为.pipe($.cached('pages'))）来解决问题2，但似乎没有效果。

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

Answer 1

这两个问题的解决方案如下：

忽略对 images 文件夹的需求。相反，保留一个单独的 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被清理了。

gulp 的高效响应图像

Efficient responsive images with gulp

gulp

graphicsmagick

responsive-images