首页 > 怎么用gulp.spritesmith生成多个精灵图

怎么用gulp.spritesmith生成多个精灵图

用gulp.spritesmith完成一个生成精灵图的task任务,想继续做一个新的精灵图,于是在第一个任务后面加上新的,当执行任务时只有第二个是生效的。

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

    var spriteData = gulp.src('./dev/assets/images/icons/normal/*.png')
        .pipe($.spritesmith({
            retinaSrcFilter: './dev/assets/images/icons/normal/*-2x.png',
            retinaImgName: '../images/sprite-2x.png',
            imgName: 'sprite.png',
            imgPath: '../images/sprite.png',
            cssName: '_icons-sprites.scss',
            padding: 20,
            algorithm: '', 
        }));

        
    //生成多个精灵图
    var spirteFile = gulp.src('./dev/assets/images/icons1/*.png')
        .pipe($.spritesmith({
            imgName: 'sprite-foods.png',
            imgPath: '../images/sprite-foods.png',
            cssName: '_foods-sprites.scss',
            cssSpritesheetName :'foods',
            padding: 10,
            algorithm: 'binary-tree',
        }));

    var imgStream = spriteData.img
    var imgFood = spirteFile.img

        .pipe(buffer())
        .pipe(gulp.dest('./dev/assets/images'))

    var cssStream = spriteData.css
    var cssFood = spirteFile.css

        .pipe(gulp.dest('./dev/assets/sass/sprites'))
    return merge(imgStream, imgFood, cssStream, cssFood);
});

该怎么写才能使两个都生效呢?合并任务?


    var imgStream = spriteData.img
        .pipe(buffer())
        .pipe(gulp.dest('./dev/assets/images'));
    var imgFood = spirteFile.img
        .pipe(buffer())
        .pipe(gulp.dest('./dev/assets/images'));

    var cssStream = spriteData.css.pipe(gulp.dest('./dev/assets/sass/sprites'));
    var cssFood = spirteFile.css.pipe(gulp.dest('./dev/assets/sass/sprites'));
    return merge(imgStream, imgFood, cssStream, cssFood);

你的spriteData.img和spriteData.css流最后没有输入到dest。

【热门文章】
【热门文章】