Question

我有一个包含大图片的文件夹。目标是创建彩色，黑白的较小图像，然后将所有内容合并以创建精灵。

我创建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个不同的任务。让他们自我约束使我的管理更加轻松。

如何命名管道功能在gulp中创建的文件？

0 个答案: