Skip to content

Instantly share code, notes, and snippets.

@AndrewDonnelly93

AndrewDonnelly93/gulpfile.dev.js

Last active January 22, 2016 10:13
Show Gist options
  • Save AndrewDonnelly93/837ed285f3b198542d35 to your computer and use it in GitHub Desktop.
Save AndrewDonnelly93/837ed285f3b198542d35 to your computer and use it in GitHub Desktop.
Download ZIP
Gulp - scss compile task
Raw
gistfile1.txt
var Gulp = require('gulp'),
Sass = require('gulp-sass'),
Sourcemaps = require('gulp-sourcemaps'),
Cssmin = require('gulp-cssnano'),
Plumber = require('gulp-plumber'),
Postcss = require("gulp-postcss"),
Duplicates = require('postcss-discard-duplicates'),
Autoprefixer = require('autoprefixer-core'),
Base64 = require('gulp-base64');
Gulp.task('default', ['watch_scss']);
/* check SCSS for errors */
Gulp.task('check_scss', function () {
Gulp.src(['./css_scss/*.scss']).pipe(Sass());
});
/* convert scss to css and preparing it to deploy on production */
Gulp.task('deploy_scss', function () {
Gulp.src('./css_scss/*.scss')
.pipe(Plumber())
.pipe(Sourcemaps.init())
.pipe(Sass())
.pipe(Base64({
baseDir: './',
extensions: ['svg', 'png'],
maxImageSize: 3 * 1024, // bytes
debug: false
}))
.pipe(Postcss([
Duplicates(),
Autoprefixer({browsers: ['last 3 version']})
]))
.pipe(Cssmin({debug: true}))//Сжимаем css
.pipe(Sourcemaps.write('./'))
.pipe(Gulp.dest('./css2/'));
});
/* deprecated */
Gulp.task('post', ['deploy_scss']);
function compile_scss(path, dest, sourceMapPath) {
path === undefined && (path = './css_scss/*.scss');
dest === undefined && (dest = './css2/');
sourceMapPath === undefined && (sourceMapPath = './');
Gulp.src(path)//Выбираем все скрипты в папке
.pipe(Plumber())//Не прерываемся на ошибки
.pipe(Sourcemaps.init())//Стартуем sourcemap
.pipe(Sass())//Компилируем SCSS
.pipe(Sourcemaps.write(sourceMapPath))//Делаем .map файлик
.pipe(Gulp.dest(dest));//Готовый css в папку
}
/* convert scss to css once */
Gulp.task('compile_scss', function () {
compile_scss()
});
/* convert scss to css once on each scss file changing */
Gulp.task('watch_scss', function watch_scss() {
Gulp.watch(['./css_scss/**/*.scss', './css_scss/*.scss'], compile_scss);
});
/* watch landing */
Gulp.task('watch_land', function watch_scss() {
var root = './lands/LPL36-01/',
compile = compile_scss.bind(this, root + 'scss/main.scss', root + 'css/', '.');
compile();
Gulp.watch(root + '*.scss', function () {
compile();
});
});
Raw
gulpfile.dev.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
*/
console.log('./' + imgFolder + name + '/*.' + format);
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)); // путь, куда сохраняем картинку
}
/* 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/');
ext === undefined && (ext = '.twig');
return Gulp
.src('./' + path)
.pipe(Svgmin())
.pipe(Svgstore())
.pipe(Replace(/<\?xml.+svg11.dtd">/g, ''))
.pipe(Replace(/<\/?g.*?>/g, ''))
.pipe(Replace(/(<^(svg|symbol))/g, '$1 class="inheriting"'))
.pipe(Dest(':name' + ext))
.pipe(Gulp.dest(dest));
}
/* make svg sprite as html */
Gulp.task('sprite_svg', Folders('images/sprite-svg', function (folder) {
return sprite_svg(folder);
}));
/* 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 || {};
//}
Raw
package.json
{
"name": "OlympTrade",
"version": "0.1.0",
"dependencies": {
"autoprefixer-core": "^5.1.8",
"gulp": "^3.9.0",
"gulp-base64": "^0.1.2",
"gulp-cssnano": "^1.1.0",
"gulp-plumber": "^1.0.0",
"gulp-postcss": "^5.1.0",
"gulp-sass": "^2.1.0",
"gulp-sourcemaps": "^1.5.1",
"postcss-discard-duplicates": "^1.1.2",
"requirejs": "^2.1.22"
},
"devDependencies": {
"gulp-dest": "^0.2.2",
"gulp-folders": "^1.1.0",
"gulp-react": "^3.1.0",
"gulp-replace": "^0.5.4",
"gulp-svgmin": "^1.2.0",
"gulp-svgstore": "^5.0.5",
"gulp.spritesmith": "^6.0.1"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment