Last active
January 27, 2016 12:58
-
-
Save AndrewDonnelly93/f7e7662baa329e8daf09 to your computer and use it in GitHub Desktop.
gulpfile2.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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-all', '../partner/images/','../partner/css/'); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment