Как я могу назвать файлы, которые труба создает в gulp? - PullRequest
Новая
       18

Как я могу назвать файлы, которые труба создает в gulp?

0 голосов
/ 16 февраля 2019

У меня есть папка с большими изображениями.цель состоит в том, чтобы создать цветные и черно-белые изображения меньшего размера, а затем объединить все для создания спрайта.

Я создаю 3 внутренних задачи для создания 3 вариантов изображений.Проблема возникает, когда я объединяю их для spritesmith и пытаюсь оптимизировать выходное изображение.

(Примечание: это не оригинальный вопрос, но я нашел проблему)

Я понял, чтофайлы, созданные с помощью gm, не имеют никакого имени, поэтому spritesmith не знает, какое имя дать правилам CSS. 

var path = require('path')
var gulp = require('gulp')
var imagemin = require('imagemin')
var buffer = require('vinyl-buffer');
var merge = require('merge-stream');


var gm = require('gulp-gm');

var spritesmith = require('gulp.spritesmith');
var spritesmash = require('gulp-spritesmash');
var pngquant = require('imagemin-pngquant');

var source = "./testorig/"
var dest = "./test/"

gulp.task('sprites', function () {

    // Get files
    var files = gulp.src(source+'/*.png')

    // Create smaller images
    var _smaller = files.pipe(gm(function (gmfile) {
        return gmfile.resize(24, 24).unsharp('0x1');
    }))

    // Create smaller white images
    var _smaller_white = files.pipe(gm(function (gmfile) {
        return gmfile.resize(24, 24).unsharp('0x1').threshold(-1, true);
    }))

    // Create smallerblack images
    var _smaller_black = files.pipe(gm(function (gmfile) {
        return gmfile.resize(24, 24).unsharp('0x1').threshold(100, true);
    })) // <<<--- Files created have no names for the css creation process below

    // Merge all icons
    var merged_images = merge(_smaller, _smaller_white, _smaller_black)

    // Create sprite
    var spriteData = merged_images
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.scss',
            padding: 3,
        }))
        .pipe(spritesmash());


    // // Pipe image stream through image optimizer and onto disk
    var imgStream = spriteData.img
        .pipe(buffer()) // <-- Error here <<------------
        .pipe(imagemin({
            progressive: true,
            interlaced: true,
            optimizationLevel: 7,
            svgoPlugins: [{
                removeViewBox: false
            }, {
                removeUselessStrokeAndFill: false
            }],
            plugins: [

                pngquant({
                    quality: [70,90],
                    speed: 1
                })
            ]
        }))
        .pipe(gulp.dest(dest));

    // // Pipe CSS stream through CSS optimizer and onto disk
    var cssStream = spriteData.css
        .pipe(gulp.dest(dest + 'sprites'));

    // // Return a merged stream to handle both `end` events
    return merge(imgStream, cssStream);

});

Ошибка: 

'sprites' errored after 14 ms
[00:45:49] TypeError: Cannot read property 'pipe' of undefined
    at /srv/spritestest/gulpfile.js:50:10
    at taskWrapper (/srv/spritestest/node_modules/undertaker/lib/set-task.js:13:15)
    at bound (domain.js:301:14)
    at runBound (domain.js:314:12)
    at asyncRunner (/srv/spritestest/node_modules/async-done/index.js:55:18)
    at _combinedTickCallback (internal/process/next_tick.js:132:7)
    at process._tickCallback (internal/process/next_tick.js:181:9)

Я попытался gulp.dest после объединения: 

var spriteData = merged_images
        .pipe(spritesmith({
            imgName: 'sprite.png',
            cssName: 'sprite.scss',
            padding: 3,
        }))
        .pipe(spritesmash())
        .pipe(gulp.dest(dest));

Я получаю файл, но у меня все еще есть ошибка, но нет следа.

Как я могу заставить это работать?

Я бы хотел избежать нескольких задач, так как у меня может быть другая папка с другим преобразованием, и я получу 50 различных задач.Их независимость облегчает мне управление.

...