CODEWITHSUNDEEP
javascriptnpmgulp
Alexander Katkov
Alexander Katkov

Reputation: 21

Gulp - make sprites by folder

This is img path structure

img
|-sprites
  |- sprite 1 folder
  |- sprite 2 folder

What I need: make gulp task to make separate sprites for each folder, file-names: sprite-{folder name}.png, sprite-{folder name}.scss. SCSS put into SCSS src folder, png into build img sprite folder.

Maybe somebody have such a task already done? Currently I try to use gulp-sprite-generator + gulp-folders plugins. Can switch to another plugins if you reccomend.

Upvotes: 1

Views: 830

Answers (1)

Alexander Katkov
Alexander Katkov

Reputation: 21

Finished with such a task:

    gulp.task(
    'sprites', folders(path.src.sprites, function (folder) {
        // Generate our spritesheet
       var spriteData = gulp.src(npmpath.join(path.src.sprites, folder, '*.png'))
           .pipe(spritesmith({
                imgName: 'sprite_' + folder + '.png',
                cssName: 'sprite_' + folder + '.scss'
            }));

        // Pipe image stream through image optimizer and onto disk
        var imgStream = spriteData.img
            .pipe(imagemin({
                progressive: true,
                interlaced: true,
                optimizationLevel: 7,
                svgoPlugins: [{removeViewBox: false}, {removeUselessStrokeAndFill: false}],
                use: [pngquant({quality: '65-80', speed: 4})]
            }))
            .pipe(gulp.dest(path.build.sprites))
            .pipe(notify({message: 'SPRITE IMG task complete', onLast: true}));
        // Pipe CSS stream through CSS optimizer and onto disk
        var cssStream = spriteData.css
            .pipe(gulp.dest(path.src.sassFolder + 'module/sprites'))
            .pipe(notify({message: 'SPRITE SCSS task complete', onLast: true}));

        // Return a merged stream to handle both `end` events
        return merge(imgStream, cssStream);

}));

Plugins: path, gulp.spritesmith, merge-stream, imagemin, imagemin-pngquant

Upvotes: 1

Related Questions