0

Web サイトで使用するレスポンシブ画像を効率的に生成しようとしていますが、既存のファイルとパスを 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;
    }));
});

これには 2 つの主な問題があります。

  1. 画像はソースと同じフォルダーにパイプされますが、ソースのimages隣のフォルダーにあることが望ましい場合です。
  2. タスクが再度実行されると、ソースと以前に生成されたレスポンシブ イメージの両方に基づいて新しいファイルが生成されます。

このタスクは、サイズ変更に GraphicsMagick を利用するgulp-responsive-images を使用します。問題 2 を解決するためにgulp-changed (set as ) を使用し.pipe($.cached('pages'))てみましたが、効果がないようでした。

現在のセットアップに基づいて、問題 1 と 2 を解決するにはどうすればよいですか?

4

1 に答える 1

2

これら 2 つの問題に対する解決策は次のとおりです。

  1. images-folderの必要性を無視します。むしろ、Sourceきちんと整理された元の画像をテキスト ファイルと一緒に別のフォルダに保管してください。
  2. 一時フォルダーを使用して、フォルダー全体outputが適切に再構築され、応答性の高い画像がテキスト ファイルと一緒に表示されるようにします。

私はそのための要点を書きました：

'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保存し、responsiveimagemin を適用して に戻しますoutput。最後に、responsiveクリーニングです。

于 2016-05-26T11:30:38.453 に答える