Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var gulp = require('gulp');
- var imagemin = require('gulp-imagemin');
- var pngquant = require('imagemin-pngquant');
- var spritesmith = require('gulp.spritesmith');
- gulp.task('generate-sprites', function () {
- var spriteData = gulp.src('path-das-suas-imagens/*.png')
- .pipe(spritesmith({
- retinaSrcFilter: ['filtro-para-as-imagens-de-retina/*-2x.png'],
- imgName: 'nome-do-sprite-que-vai-ser-gerado.png',
- retinaImgName: 'nome-do-sprite-retina-que-vai-ser-gerado.png',
- imgPath: 'url-da-imagem-que-vai-ser-colocado-no-css', // dica: da pra colocar um if ternário com a url de dev e outra de prod
- retinaImgPath : 'url-da-imagem-de-retina-que-vai-ser-colocado-no-css', // dica: da pra colocar um if ternário com a url de dev e outra de prod
- cssName: 'nome-do-arquivo-css-que-vai-sergerado.css',
- algorithm : 'left-right', // algoritmo que vai montar os sprites, pode ser um destes: top-down left-right diagonal alt-diagonal binary-tree
- padding: 2, // espaçamento entre as imagens
- cssTemplate: 'tpl-sprite.handlebars' // template pra gerar o css
- }));
- // antes de salvar as imagens no disco, aproveita o stream e já minifica a imagem
- spriteData.img.pipe(imagemin({
- progressive: true,
- svgoPlugins: [{removeViewBox: false}],
- use: [pngquant()]
- }))
- .pipe(gulp.dest('diretorio-onde-sera-salva-a-imagem/'));
- // Pipe CSS stream through CSS optimizer and onto disk
- spriteData.css.pipe(gulp.dest('diretorio-onde-sera-salvo-o-css/'));
- });
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement