Skip to content
Alexander Slansky edited this page Jan 19, 2014 · 3 revisions

Optimize sprite.png after creation

var gulp = require('gulp'),
    sprite = require('gulp-sprite'),
    imagemin = require('gulp-imagemin');

gulp.task('sprites', function () {
    gulp.src('./src/img/*.png')
      .pipe(sprite('sprites.png', {
        imagePath: '../img',
        cssPath: './src/scss/utils/'
      }))
      .pipe(imagemin())
      .pipe(gulp.dest('./dist/img/'));
});

Use with css preprocessor

var gulp = require('gulp'),
    sprite = require('gulp-sprite'),
    sass = require('gulp-sass');

gulp.task('styles', ['sprites'], function () {
    gulp.src('./src/scss/main.scss')
      .pipe(sass({
        includePaths: ['./src/scss']
      }))
      .pipe(gulp.dest('./dist/css'));
});

gulp.task('sprites', function () {
    var stream = gulp.src('./src/img/*.png')
      .pipe(sprite('sprites.png', {
        imagePath: '../img',
        cssPath: './src/scss/utils/',
        preprocessor: 'scss'
      }))
      .pipe(gulp.dest('./dist/img/'));
    return stream;
});
Clone this wiki locally