Skip to content

Instantly share code, notes, and snippets.

@delphinpro
Created January 4, 2019 12:04
Show Gist options
  • Save delphinpro/76ef9249a609c022cbe8c66e39254491 to your computer and use it in GitHub Desktop.
Save delphinpro/76ef9249a609c022cbe8c66e39254491 to your computer and use it in GitHub Desktop.
Заготовка для сборки растровых спрайтов
config.sprite.bitmap = {
srcPath : 'source/sprites/bitmap',
srcFiles : '*.{jpg,jpeg,png,gif}',
src2x : 'source/sprites/bitmap/services/*@2x.png',
destImage: path.join(root.build, root.staticDir, 'images'),
destStyle: 'source/sass/',
};
lazyRequireTask('sprite:bitmap', 'sprite.bitmap', config);
const path = require('path');
const gulp = require('gulp');
const sprite = require('gulp.spritesmith');
const glob = require('glob');
const merge = require('merge-stream');
const config = require('../../gulp.config');
module.exports = function () {
let build = path.join(config.root.build, config.images.build);
const globSrc = path.join(config.sprite.bitmap.srcPath, '**', config.sprite.bitmap.srcFiles);
console.log(globSrc);
return function (done) {
new glob.Glob(globSrc, {}, function (err, matches) {
// console.log(matches);
let dirNames = []; // имена каталогов с картинками для спрайтов
const files = []; // массив с данными для spritesmith
let destination = []; // каталоги назначения
// let dirs = [];
let dirs = matches.map(p => p.replace(config.sprite.bitmap.srcPath, '').split('/').filter(i => !!i)[0]);
// console.log('dirs', dirs);
for (let i = 0; i < matches.length; i++) {
const itemPath = matches[i].split('/');
dirNames.push(itemPath[itemPath.length - 2]);
itemPath[0] = 'app';
itemPath.length = 4;
destination.push(itemPath.join('/'));
}
// console.log(dirNames);
dirNames = Array.from(new Set(dirs));
destination = Array.from(new Set(destination));
console.log('dirNames', dirNames);
for (let i = 0; i < dirNames.length; i++) {
files[i] = {};
files[i].data = [];
files[i].filename = dirNames[i];
for (let j = 0; j < matches.length; j++) {
if (matches[j].indexOf(dirNames[i]) !== -1) {
files[i].data.push(matches[j]);
}
}
}
for (let i = 0; i < files.length; i++) {
files[i].destImg = '';
for (let j = 0; j < destination.length; j++) {
const str = destination[j].split('/');
if (files[i].data[0].indexOf(str[2]) !== -1) {
files[i].destImg = destination[j];
}
}
}
console.log(files);
files.forEach(function (item, i, arr) {
const spriteData = gulp.src(arr[i].data)
.pipe(sprite({
imgName: arr[i].filename + '.png',
cssName: arr[i].filename + '.scss',
imgPath: '../img/' + arr[i].filename + '.png',
}));
const stylStream = spriteData.css.pipe(gulp.dest('app/tmp/' + arr[i].filename + '/'));
const imgStream = spriteData.img.pipe(gulp.dest(arr[i].destImg));
return merge(imgStream, stylStream);
});
done();
});
};
// return function (done) {
// let spriteData = gulp.src(config.sprite.bitmap.src)
// .pipe(sprite({
// imgName : 'sprite.png',
// cssName : '_sprite1.scss',
// imgPath : '/assets/templates/doseo/images/sprite.png',
// algorithm : 'binary-tree',
// retinaSrcFilter: [config.sprite.bitmap.src2x],
// retinaImgName : 'sprite@2x.png',
// retinaImgPath : '/assets/templates/doseo/images/sprite@2x.png',
// // cssTemplate: function (a) {
// // let out = '';
// // a.sprites.forEach(i => {
// // out += `\$${i.name}: (${i.px.x}, ${i.px.y}, ${i.px.offset_x}, ${i.px.offset_y}, ${i.px.width}, ${i.px.height}, ${i.px.total_width}, ${i.px.total_height}, '${i.escaped_image}', '${i.name}');` + '\n';
// // });
// // return out;
// // },
// }));
//
// const imageStream = spriteData.img.pipe(gulp.dest(config.sprite.bitmap.destImage)); // путь, куда сохраняем картинку
// const styleStream = spriteData.css.pipe(gulp.dest(config.sprite.bitmap.destStyle)); // путь, куда сохраняем стили
//
// return merge(imageStream, styleStream);
// };
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment