gulp.task('svgmin', function() {
return gulp.src(SVGMIN_SRC)
// Pass in options to the task
.pipe(svgmin())
.pipe(gulp.dest(IMAGE_DEST))
.on('error', markAsFailed)
})
gulp.task('svgSpriteBuild', () => {
return gulp.src('./assets/animals/*.svg')
.pipe(svgmin({
js2svg: {
pretty: true
}
}))
.pipe(cheerio({
run: ($) => {
$('[fill]').removeAttr('fill');
$('[style]').removeAttr('style');
},
parserOptions: {
xmlMode: true
}
}))
.pipe(replace('>', '>'))
.pipe(svgSprite({
mode: "symbols",
preview: false,
selector: "icon-%f",
svg: {
symbols: 'symbol_sprite.html'
}
}
))
.pipe(gulp.dest('./dest/'));
});
gulp.task("icons", () => {
return gulp.src("./resources/icons/*.svg")
.pipe(svgmin())
.pipe(svgstore())
.pipe(rename("iconset.svg"))
.pipe(gulp.dest("public/gfx"))
})
gulp.task('svg', () => {
gulp
.src('src/assets/svg/*.svg')
.pipe(
plumber({
errorHandler: plumberErrorHandler(
'Error was occurred during SVG compile'
)
})
)
.pipe(
svgMin(file => {
return {
plugins: [
{
cleanupIDs: {
prefix: `${path.basename(
file.relative,
path.extname(file.relative)
)}-`,
minify: true
}
}
]
}
})
)
.pipe(svgStore({ inlineSvg: true }))
.pipe(gulp.dest('dist/assets/svg'))
.pipe(browserSync.stream())
})
gulp.task('svg', function() {
return gulp.src(cfg.paths.svg.src)
.pipe(plumber())
.pipe(svgmin(cfg.settings.svgmin))
.pipe(svgstore(cfg.settings.svgstore))
.pipe(gulp.dest(cfg.paths.svg.dest));
});
gulp.task('svgmin', function() {
gulp.src('src/assets/images/*.svg')
.pipe(svgmin([{
removeViewBox: false
}]))
.pipe(gulp.dest('dist/images'));
});
gulp.task('craft-svg', function() {
del(src + 'sass/common/_sprites.sass');
return gulp.src(src + "icons/*.svg")
.pipe(svgmin({
js2svg: { pretty: true }
}))
.pipe(cheerio({
run: function($) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
$('[style]').removeAttr('style');
},
parserOptions: { xmlMode: true }
}))
.pipe(replace('>', '>'))
.pipe(svgsprite({
mode: {
symbol: {
sprite: "../sprites.svg",
render: {
sass: {
dest: '../../../src/sass/common/_sprites.sass',
template: src + 'sass/common/_sprites_layout.sass'
}
}
}
}
}))
.pipe(gulp.dest(dist + 'img/'))
.pipe(gulp.dest(dev + 'img/'));
});
gulp.task('deploy', function() {
//Minify and copy CSS files
var makeCSS = gulp.src('./css/*.css')
.pipe(cleanCSS({compatability: 'ie8'}))
.pipe(gulp.dest('./docs/css'));
//Minify and copy SVG files
var makeSVG = gulp.src('./img/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('./docs/img'));
//Bundle and minify JS files
var makeJS = browserify('./js/game.js', {"debug": false})
.bundle()
.on('error', function(err){
gutil.log(err.message);
this.emit('end');
})
.pipe(source('bundle.js'))
.pipe(buffer())
.pipe(uglify())
.pipe(gulp.dest('./docs'));
//Minify and copy index
var makeHTML = gulp.src('./*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('./docs'));
//Copy all other relevant files (favicon)
var makeREST = gulp.src('./favicon.*')
.pipe(gulp.dest('./docs'));
return merge(makeCSS, makeSVG, makeJS, makeHTML, makeREST);
});
gulp.task("svg-sprite", function() {
return gulp.src("build/img/icons/*.svg")
.pipe(svgmin({
js2svg: {
pretty: true
}
}))
.pipe(cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('[stroke]').removeAttr('stroke');
$('[style]').removeAttr('style');
},
parserOptions: { xmlMode: true }
}))
.pipe(replace('>', '>'))
.pipe(svgstore({
mode: {
symbol: {
sprite: "../svg-sprite.svg"
}
}
}))
.pipe(rename("svg-sprite.svg"))
.pipe(gulp.dest("build/img"));
});
gulp.task('svgstore', function (callback) {
let spritePath = dirs.source + '/blocks/sprite-svg--localstorage/svg/';
if(fileExist(spritePath) !== false) {
console.log('---------- Сборка SVG спрайта');
return gulp.src(spritePath + '*.svg')
.pipe(svgmin(function (file) {
return {
plugins: [{
cleanupIDs: {
minify: true
}
}]
}
}))
.pipe(svgstore({ inlineSvg: true }))
.pipe(cheerio(function ($) {
$('svg').attr('style', 'display:none');
}))
.pipe(rename('sprite-svg--ls.svg'))
.pipe(size({
title: 'Размер',
showFiles: true,
showTotal: false,
}))
.pipe(gulp.dest(dirs.source + '/blocks/sprite-svg--localstorage/img'));
}
else {
console.log('---------- Сборка SVG спрайта: нет папки с картинками');
callback();
}
});
module.exports = function(configName) {
const gulp = require('gulp');
const svgstore = require('gulp-svgstore');
const svgmin = require('gulp-svgmin');
const path = require('path');
const notify = require('gulp-notify');
const util = require('gulp-util');
const config = util.env.boilerplate.config;
const svgspriteConfig = config.tasks[configName];
return gulp.src(svgspriteConfig.source, {cwd: config.sourceRoot})
.pipe(svgmin(function (file) {
var prefix = path.basename(file.relative, path.extname(file.relative));
return {
plugins: [{
cleanupIDs: {
prefix: prefix + '-',
minify: true
}
}]
};
}))
.pipe(svgstore())
.pipe(gulp.dest(config.destinationRoot + svgspriteConfig.destination))
.pipe(notify('Successfully created SVG Sprite'));
};
() => {
//const icons = [];
gulp.src(PATHS.svg.src + '**/*.svg')
.pipe(svgmin())
.pipe(cheerio({
run: function ($, file, done) {
//extract icon name from file path.
var name = file.path.substring(
file.path.lastIndexOf('\\') + 1,
file.path.lastIndexOf('.')
);
//extract svg path from xml element.
var path = $('path').attr("d") || "";
//store in the file
util.log(`extracted path for file ${name} : ${path !== ""}`);
file.jsonValue = {name, path};
done();
}
}))
.pipe(util.buffer((err, files)=>{
//extract jsonValue from files array.
const paths = {};
files.forEach(
(file)=>{
paths[file.jsonValue.name] = file.jsonValue.path;
}
);
fs.writeFile('./src/paths.json', JSON.stringify(paths));
}));
}
gulp.task('icons', function () {
var svgs = gulp.src('src/svg-icons/*.svg')
.pipe(svgmin(function (file) {
var prefix = path.basename(file.relative, path.extname(file.relative));
return {
plugins: [{
cleanupIDs: {
prefix: prefix + '-',
minify: true
}
}]
}
}))
.pipe(cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('title').remove();
},
parserOptions: { xmlMode: true }
}))
.pipe(svgstore({ inlineSvg: true }));
function fileContents (filePath, file) {
return file.contents.toString();
}
return gulp
.src('build/index.html')
.pipe(inject(svgs, {transform: fileContents }))
.pipe(gulp.dest('build'))
.pipe(livereload());
});
gulp.task('svgSprite', function () {
return gulp.src('src/img/_svgSprite/*.svg')
.pipe(svgmin({js2svg: {pretty: true}}))
// remove fill and style
.pipe(cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
$('[style]').removeAttr('style')
},
parserOptions: {xmlMode: true}
}))
// cheerio plugin create unnecessary string '>', so replace it.
.pipe(replace('>', '>'))
.pipe(svgSprite({
mode: {
symbol: true,
css: {
render: {
css: true
}
}
}
}))
.pipe(gulp.dest('../img'));
});
gulp.task('svgMin', function () {
return gulp.src('src/img/*.svg')
.pipe(svgmin({
js2svg: {pretty: true}
}))
.pipe(gulp.dest('../img/'));
});
gulp.task('svgsprite', function() {
return gulp.src(src.svg + '/icons/*.svg')
.pipe(svgmin({
js2svg: {
pretty: true
},
plugins: [{
removeDesc: true
}, {
removeTitle: false
}
]}))
.pipe(cheerio({
run: function ($, file) {
$('[fill]:not([fill="currentColor"])').removeAttr('fill');
},
parserOptions: { xmlMode: true }
}))
.pipe(svgSprite({
mode: "symbols",
selector: "icon-%f",
preview: false,
svg: {
symbols: 'icons.svg'
}
// templates: {
// css: require('fs').readFileSync('sass/lib/sprite-template.scss', "utf-8")
// },
// cssFile: '../sass/_svg-sprite.sass',
// svgPath: '../img/sprites/%f',
// pngPath: '../img/sprites/%f',
// padding: 10
}))
.pipe(gulp.dest(dest.img));
});
gulp.task('reviveSVG', () => {
del(['svg_minified/**/*.svg'], function (err, deleted) {
console.log('deleted: ' + deleted.join(','));
});
gulp.src('svg/**/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('./svg_minified'));
});
gulp.task('svgstore', ['svgfallback'], function() {
return gulp.src(svgsource)
.pipe(rename({ prefix: 'pcc-icon-' }))
.pipe(svgmin())
.pipe(svgstore())
.pipe(rename('svg-icons.svg'))
.pipe(gulp.dest(svgdest));
});
gulp.task('svg', function () {
return gulp
.src('icons/*.svg')
.pipe(svgmin())
.pipe(svg())
.pipe(gulp.dest('sprites/'))
.pipe(size());
});
gulp.task('optimize', function (cb) {
console.log('-- Optimizing SVG files');
pump([
gulp.src(paths.ico_input),
svgmin(),
gulp.dest(paths.ico_output),
], cb );
});
gulp.task('svgstore', function() {
return gulp
.src(path.icons)
.pipe(svgmin())
.pipe(svgstore())
.pipe(rename({ baseline: 'sprite' }))
.pipe(gulp.dest(path.svgSprite));
});
gulp.task('svgstore', function () {
return gulp
.src('src/svg/*.svg')
.pipe(svgmin())
.pipe(svgstore({ inlineSvg:true }))
.pipe(rename('svg.php'))
.pipe(gulp.dest('template-parts'));
});
gulp.task('svgimg', function () {
return gulp.src('svg/img-*.svg')
.pipe(svgmin())
.pipe(cheerio({
parserOptions: {xmlMode: true}
}))
.pipe(gulp.dest('web/images'));
});
gulp.task('symbols', function() {
return gulp.src('build/img/icons/*.svg')
.pipe(svgmin())
.pipe(svgstore({
inlineSvg: true
}))
.pipe(rename('symbols.svg'))
.pipe(gulp.dest('build/img'));
});
gulp.task('demo:images', () => {
return gulp.src('demo/**/*.svg')
.pipe(svgmin())
.pipe(templatecache({
filename: 'images.js',
module: 'demoApp'
}))
.pipe(gulp.dest('.tmp/build'));
})
gulp.task('icons', function(){
gulp.src(config.src)
.pipe(sketch({
export: 'artboards',
formats: 'svg'
}))
.pipe(cheerio({
run: function ($) {
$('[fill]').removeAttr('fill');
},
parserOptions: { xmlMode: true }
}))
.pipe(svgmin())
.pipe(gulp.dest(config.dest))
.pipe(svgmin())
.pipe(svgstore())
.pipe(gulp.dest(config.dest));
});
gulp.task('buildimg', function() {
// copy and minify svgs
gulp.src('./public/img/*.svg')
.pipe(svgmin())
.pipe(gulp.dest('build/assets/img'));
// copy over other images
gulp.src('./public/img/!(*.svg)')
.pipe(gulp.dest('build/assets/img'));
});
gulp.task("symbols", function() {
return gulp.src("build/img/*.svg")
.pipe(svgmin())
.pipe(svgstore({
inlineSvg: true
}))
.pipe(rename("symbols.svg"))
.pipe(gulp.dest("build/img"));
});
gulp.task('min-images', gulp.series(function () {
return gulp.src('src/res/*.svg')
.pipe(svgmin({
plugins: [{
cleanupIDs: false
}]
}))
.pipe(gulp.dest('dist/res'));
}));
gulp.task('svg', function () {
return gulp.src(projectPath.src.svg)
.pipe(svgmin())
.pipe(size({
title: 'SVG'
}))
.pipe(gulp.dest(projectPath.build.svg))
.pipe(reload({stream: true}));
});