Spritesheet generator as an option?

[raphaelluchini]

What do you think include a option for a gulp task generate a spritesheet using only gulp or sass as a gulp task? In this case we'd use src/assets/compiled-images and src/assets/images(non compiled). In some cases you don't want to generate a spritesheet for all your images, for example a facebook image share. And in the dist folder we could the sabe js naming style(spritesheet-e2cdf34.png).

[Swiip]

Spite images are a common needs for web building tools.

But I don't see very easily how to integrate and generalize the idea to the generator. It often needs a deep integration with the css preprocessor.

But I must admit that it's been a long time since I've used sprites thanks to CSS3 and font icons.

[raphaelluchini]

Yes! CSS3, font icons, svg are great tools! But unfortunately there are some layouts and and solutions we need to compress to reduce the number of requests.

There are some approaches to figure out this issue easily.

Using gulp spritesmith.
Using compass sprite.

We could include both in a option. If the user select to use sass, ask for compass and include the task. if the user select other css preprocessor, we could ask for include spritesmith.

I've been using spritesmith + imagemin + csso in production and works pretty good!

A simple example:

gulp.task('sprite', function () {
    var spritesmith = require('gulp.spritesmith');
    var imagemin = require('gulp-imagemin');
    var csso = require('gulp-csso');
    var del = require('del');
    // Generate our spritesheet
    del(['app/css/*_sprite.png'], function (err) {
        var spriteData = gulp.src('src/images/**/*.png').pipe(spritesmith({
            imgName: new Date().getTime()+'_sprite.png',
            cssName: 'sprite.css'
        }));
        // Pipe image stream through image optimizer and onto disk
        spriteData.img
            .pipe(imagemin())
            .pipe(gulp.dest('app/css/'));

        // Pipe CSS stream through CSS optimizer and onto disk
        spriteData.css
            .pipe(csso())
            .pipe(gulp.dest('src/css/'));
    });
});

[zckrs]

Nice idea but that should be a recipe like docs/recipes/create-spritesheet.md.

@raphaelluchini can you create this recipes ?

[raphaelluchini]

Yes @zckrs , for sure, but there is a reason to not be included as an option? Perhaps this feature is very specific?

[zckrs]

Yes it is very specific. For a concrete option we should change the CSS of the sample application and the controller who list technologies used

[rosscdh]

Hi there, where does one find the recipes/docs?

Trying to customise the mdThemeProvider and mdIconProvider with material-design-icons but so far no joy. seems to be specific to the generator.

[intellix]

Another, which I'm using: https://github.com/aslansky/css-sprite

[zckrs]

This issue is a nice feature/enhancement but we (Swiip and me) don't have time to implement this for the moment.
Our first priority is stabilized functionality already present in the generator for the purpose of releasing v1.0.0

For clarity in issues I will close the issue and marks it as "good-but-no-time".
Any good contributions to resolve this matter is appreciated and merged.

Otherwise we will reopen the issue after the v1.0.0