Skip to content

Instantly share code, notes, and snippets.

@AndrewDonnelly93

AndrewDonnelly93/gulpfile.js

Created January 27, 2016 14:50
Show Gist options
  • Save AndrewDonnelly93/9e9476b2ad401246d5fc to your computer and use it in GitHub Desktop.
Save AndrewDonnelly93/9e9476b2ad401246d5fc to your computer and use it in GitHub Desktop.
Download ZIP
gulpfile-sprite
Raw
gulpfile.js
var Gulp = require('gulp'),
Dest = require('gulp-dest'),
Plumber = require('gulp-plumber'),
React = require('gulp-react'),
Spritesmith = require('gulp.spritesmith'),
Svgstore = require('gulp-svgstore'),
Svgmin = require('gulp-svgmin'),
Replace = require('gulp-replace'),
Folders = require('gulp-folders');
Gulp.task('default', ['watch_react']);
function compile_react(path, dest, logText) {
path === undefined && (path = './scripts/react/**/**/*.jsx');
dest === undefined && (dest = './scripts/react/');
Gulp.src(path)
.pipe(Plumber())
.pipe(Replace(/<t tid="([^"]+)">([^<>]+)<\/t>/g, '{trans.get(\'$1\', \'$2\')}'))
.pipe(React())
.pipe(Gulp.dest(dest).on('end', function () {
logText && console.log(logText);
}));
}
/* build all react files */
Gulp.task('compile_react', function () {
compile_react()
});
function watch_react(path, pref) {
path === undefined && (path = ['./scripts/react/**/**/*.jsx']);
pref === undefined && (pref = 'assets/');
Gulp.watch(path).on('change', function (file) {
var farr = /www\\(.+)/.exec(file.path) || /www\/(.+)/.exec(file.path),
fname = './' + farr[1].replace(/\\/g, '/'),
folderName = fname.replace(/([^\/]+\.jsx)$/, '') + pref;
compile_react(fname, folderName, 'done - ' + fname);
});
}
/* build react files each file .jsx changed */
Gulp.task('watch_react', function () {
watch_react();
});
/* make translation */
//Gulp.task('text_react', function () {
// //var content = "trans.get('deals_make_attention' , 'Обратите внимание!'))",
// //exp = new RegExp('trans\.get\\(\\s*\'([^\']+)\'\\s*\,\\s*\'([^\']+)\'', 'gm'),
// //res = content.search(exp);
// //res = exp.exec(content);
// //console.log(res);
//
//
// //Gulp.src('./scripts/react/**/**/*.jsx')
// //.pipe(findTrans(new RegExp('tid\=\"([^\"]+)">([^<]+)</t>', 'gm'), ',"%1":"{%trans "%1"%}%2{% endtrans %}"'));
//
// Gulp.src('./scripts/react/**/**/**/*.react.js')
// .pipe(findTrans(new RegExp('trans\.get\\(\\s*\'([^\']+)\'\\s*\,\\s*\'([^\']+)\'', 'gm'), ',"%1":"{%trans "%1"%}%2{% endtrans %}"'));
//});
function sprite_png(name, imgFolder, cssFolder, format) {
imgFolder = imgFolder || 'images/sprite-png/';
cssFolder = cssFolder || 'css_scss/sprites/';
format = format || 'png';
name = name || 'base';
var contexts = {
/* */
'logo-dark': {
iconName: 'logo',
cssContext: 'body.scrolled'
},
'menu-light': {
iconName: 'menu-dark',
cssContext: 'body.scrolled'
},
'user-nonscrolled-logged': {
iconName: 'user-nonscrolled-unlogged',
cssContext: 'body.logged'
},
'user-scrolled-logged': {
iconName: 'user-nonscrolled-unlogged',
cssContext: 'body.logged.scrolled'
},
'user-scrolled-unlogged': {
iconName: 'user-nonscrolled-unlogged',
cssContext: 'body.scrolled'
},
'purse-light': {
iconName: 'purse-dark',
cssContext: 'body.scrolled header'
},
'start-trade-white': {
iconName: 'start-trade-dark',
cssContext: 'body.scrolled'
}
};
var contextsHover = {
'arrow-to-left': {
iconName: 'arrow-to-left',
cssContext: 'a:hover'
},
'arrow-to-right': {
iconName: 'arrow-to-right',
cssContext: 'a:hover'
}
};
/*
a:hover .sprite-main.icon-arrow-to-left-std
*/
var spriteData =
Gulp.src('./' + imgFolder + name + '/*.' + format) // путь, откуда берем картинки для спрайта
.pipe(Spritesmith({
imgName: name + '.' + format,
cssFormat: 'scss',
imgPath: '/' + imgFolder + name + '.' + format,
padding: 3,
cssName: name + '.scss',
imgOpts: {
quality: 100
},
cssTemplate: function (data) {
// Convert sprites from an array into an object
var result = '';
var flag = false;
var iconsCommonDone = {};
var iconsHoverDone = {};
var commonUrl = '%context%.icon-std, %context%.icon-after:after, %context%.icon-before:before{background-image: url(%url%);}\r';
var commonTpl = '%context%.icon-%iconName%-std,\r%context%.icon-%iconName%-before:before,\r%context%.icon-%iconName%-after:after';
//bg
var hoverTpl = '%context%.icon-%iconName%-std:hover,\r%context%.icon-%iconName%-before:hover:before,\r%context%.icon-%iconName%-after:hover:after';
var hoverTplContexts = '%context%.icon-%iconName%-std,\r%context%.icon-%iconName%-before:before,\r%context%.icon-%iconName%-after:after';
//bg
var selectedTpl = '%context%.icon-%iconName%-std.selected,\r%context%.icon-%iconName%-before.selected:before,\r%context%.icon-%iconName%-after.selected:after';
//bg
var hoverSelectedTpl = '%context%.icon-%iconName%-std:hover,\r%context%.icon-%iconName%-before:hover:before,\r%context%.icon-%iconName%-after:hover:after,\r%context%.icon-%iconName%-std.selected,\r%context%.icon-%iconName%-before.selected:before,\r%context%.icon-%iconName%-after.selected:after';
var hoverSelectedTplContexts = '%context%.icon-%iconName%-std,\r%context%.icon-%iconName%-before:before,\r%context%.icon-%iconName%-after:after,\r%context%.icon-%iconName%-std.selected,\r%context%.icon-%iconName%-before.selected:before,\r%context%.icon-%iconName%-after.selected:after';
var propsCommon = '{width: %width%;height: %height%;\rbackground-position: %left% %top%;}';
var propsSpecial = '{background-position: %left% %top%;}';
data.sprites.forEach(function (sprite) {
var tpl, url = '', contextStr, contextHoverStr,
width = sprite.px.width,
height = sprite.px.height,
left = sprite.px.offset_x,
top = sprite.px.offset_y,
splitedName = sprite.name.split('_'),
iconName = splitedName[0],
context = contexts[iconName],
contextHover = contextsHover[iconName],
standartContextClass = '.' + name,
modifer = splitedName.length === 2 ? splitedName[1] : null;
if (!flag) {
url = commonUrl.replace(/%url%/gm, sprite.image);
flag = true;
}
if (modifer === 'hover-selected') {
contextStr = context ? hoverSelectedTpl.replace(/%iconName%/gm, context.iconName).replace(/%context%/gm, context.cssContext + ' ' + standartContextClass) + ',\r' : '';
contextHoverStr = contextHover ? hoverSelectedTplContexts.replace(/%iconName%/gm, contextHover.iconName).replace(/%context%/gm, contextHover.cssContext + ' ' + standartContextClass) + ',\r' : '';
tpl = contextHoverStr + contextStr + hoverSelectedTpl + '\r' + propsSpecial;
tpl = tpl.replace(/%left%/gm, left).replace(/%top%/gm, top);
} else if (modifer === 'hover') {
contextStr = context ? hoverTpl.replace(/%iconName%/gm, context.iconName).replace(/%context%/gm, context.cssContext + ' ' + standartContextClass) + ',\r' : '';
contextHoverStr = contextHover ? hoverTplContexts.replace(/%iconName%/gm, contextHover.iconName).replace(/%context%/gm, contextHover.cssContext + ' ' + standartContextClass) + ',\r' : '';
tpl = contextHoverStr + contextStr + hoverTpl + '\r' + propsSpecial;
tpl = tpl.replace(/%left%/gm, left).replace(/%top%/gm, top);
} else if (modifer === 'selected') {
contextStr = context ? selectedTpl.replace(/%iconName%/gm, context.iconName).replace(/%context%/gm, context.cssContext + ' ' + standartContextClass) + ',\r' : '';
tpl = contextStr + selectedTpl + '\r' + propsSpecial;
tpl = tpl.replace(/%left%/gm, left).replace(/%top%/gm, top);
} else {
contextStr = context ? commonTpl.replace(/%iconName%/gm, context.iconName).replace(/%context%/gm, context.cssContext + ' ' + standartContextClass) + ',\r' : '';
tpl = contextStr + commonTpl + '\r' + propsCommon;
tpl = tpl.replace(/%width%/gm, width).replace(/%height%/gm, height).replace(/%left%/gm, left).replace(/%top%/gm, top);
}
tpl = url + tpl;
tpl = tpl.replace(/%iconName%/gm, iconName).replace(/%context%/gm, standartContextClass);
result += tpl + '\n\r';
});
return result;
}
}));
spriteData.css.pipe(Gulp.dest('./' + cssFolder)); // путь, куда сохраняем стили
return spriteData.img.pipe(Gulp.dest('./' + imgFolder).on('end', function () {
console.log('./' + imgFolder + name + '.' + format);
console.log('./' + cssFolder + name + '.scss');
})); // путь, куда сохраняем картинку
}
/* make png sprite as .png + .css */
Gulp.task('sprite_png', Folders('images/sprite-png', function (folder) {
return sprite_png(folder);
}));
function sprite_svg(name, path, dest, ext, normalize) {
name === undefined && (name = 'sprite-base');
path === undefined && (path = 'images/sprite-svg/' + name + '/*.svg');
dest === undefined && (dest = '../app/Olymp/View/svg-sprites/svg-include');
ext === undefined && (ext = '.twig');
normalize === undefined && (normalize = true);
var result = Gulp
.src('./' + path)
.pipe(Svgmin())
.pipe(Svgstore());
normalize && result
.pipe(Replace(/<\?xml.+svg11.dtd">/g, ''))//remove all xml
.pipe(Replace(/<\/?g.*?>/g, ''))//remove all <g> tags
.pipe(Replace(/ class=".*?"/g, ''))//remove all classes
.pipe(Replace(/(<)(path fill="none")/g, '$1__$2'))//temporally replace transparent figures
.pipe(Replace(/(<symbol.*?<path)(\s|\/)/g, '$1 class="inheriting"$2'))//add class to first <path> element into each <symbol>
.pipe(Replace(/(<)__(path fill="none")/g, '$1$2'))//restore transparent figures
result
.pipe(Dest(':name' + ext))
.pipe(Gulp.dest(dest).on('end', function () {
console.log(dest + name + ext);
}));
return result;
}
/* make svg sprite as html */
Gulp.task('sprite_svg', Folders('images/sprite-svg', function (folder) {
return sprite_svg(folder);
}));
Gulp.task('sprite', ['sprite_png', 'sprite_svg']);
/* mix options object 'opts' with options object 'more' and command line args */
//var argv = require('yargs').argv;
//function optionHelper(opts, more) {
// if (opts) {
// Object.keys(opts).map(function (key) {
// opts[key] = argv[key] !== undefined ? argv[key] : (more[key] !== undefined ? more[key] : opts[key]);
// });
// }
//
// return opts || more || {};
//}
Gulp.task('sprite_png_landing', function(){
sprite_png('sprite-src', '../partner/images/','../partner/css/');
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment