pjosephraj
8/27/2017 - 3:04 PM

Sprites

Sprites

var gulp = require('gulp'),
    svgSprite = require('gulp-svg-sprite'),
    rename = require('gulp-rename'),
    del = require('del'),
    svg2png = require('gulp-svg2png');

    var config = {
        shape:{
            spacing:{
                padding: 1
            }
        },
        mode: {
            css: {
                variables:{
                    replaceSvgWithPng: function(){
                        return function(sprite, render){
                            return render(sprite).split('.svg').join('.png');
                        }
                    }
                },
                sprite: 'sprite.svg',
                render:{
                    css:{
                        template: './gulp/templates/sprite.css'
                    }
                }
            }
        }
    }

gulp.task('beginClean', function(){
    return del(['./app/temp/sprite', './app/assets/images/sprites'])
});

gulp.task('createSprite', ['beginClean'], function(){
    return gulp.src('./app/assets/images/icons/**/*.svg')
    .pipe(svgSprite(config))
    .pipe(gulp.dest('./app/temp/sprite/'));
});

gulp.task('createPngCopy', ['createSprite'], function(){
    return gulp.src('./app/temp/sprite/css/*.svg')
    .pipe(svg2png())
    .pipe(gulp.dest('./app/temp/sprite/css'));
});

gulp.task('copySpriteGraphic', ['createPngCopy'], function(){
    return gulp.src('./app/temp/sprite/css/**/*.{svg,png}')
    .pipe(gulp.dest('./app/assets/images/sprites'));
});

gulp.task('copySpriteCSS', ['createSprite'], function(){
    return gulp.src('./app/temp/sprite/css/*.css')
    .pipe(rename('_sprite.css'))
    .pipe(gulp.dest('./app/assets/styles/modules'));
});

gulp.task('endClean', ['copySpriteGraphic', 'copySpriteCSS'], function(){
    return del('./app/temp/sprite')
});

gulp.task('icons', ['beginClean', 'createSprite', 'createPngCopy', 'copySpriteGraphic', 'copySpriteCSS', 'endClean']);