登录  /  注册
javascript - 怎么用gulp.spritesmith生成多个精灵图
高洛峰
高洛峰 2017-04-11 09:10:50
[JavaScript讨论组]

用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);
});

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

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 //m.sbmmt.com/ All Rights Reserved | php.cn | 湘ICP备2023035733号