0

我正在尝试有效地生成在网站上使用的响应式图像，但是在处理 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;
    }));
});

这有两个主要问题：

  1. 图像被传送到与其源相同的文件夹中，而它们最好位于images源旁边的 - 文件夹中。
  2. 如果再次运行该任务，它会根据源和先前生成的响应图像生成新文件。

该任务使用gulp-responsive-images，它利用 GraphicsMagick 来调整大小。我尝试使用gulp-changed (set as .pipe($.cached('pages'))) 来解决问题 2，但它似乎没有任何效果。

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

4

1 回答 1

2

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

  1. 忽略对文件夹的需要images。相反，保留一个单独Source的文件夹，其中包含整齐组织的原始图像和文本文件。
  2. 使用临时文件夹以确保output正确重建整个 -folder，并在文本文件旁边添加响应式图像。

我为此写了一个要点：

'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被清洗干净。

于 2016-05-26T11:30:38.453 回答