/
gulpfile.js
150 lines (134 loc) · 5.56 KB
/
gulpfile.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
var gulp = require('gulp');
var fs = require('fs');
var rmdir = require('rmdir');
var del = require('del');
var svg2png = require('gulp-svg2png');
var DOMParser = require('xmldom').DOMParser;
var graphicsmagick = require('gulp-gm');
var rename = require('gulp-rename');
var timestamp = require('console-timestamp');
var namer = require('./ntc.js');
var config = require('./config.json');
gulp.task('default', function() {
var colorName = getColorName(config.image.color).toString().replace(/\s/g, "_").toLowerCase();
createFolders(colorName);
// open svg sprite file
fs.readFile(config.paths.svg_sprite, 'utf8', function(err, data) {
if (err) {
return console.log(timestamp('[hh:mm:ss] ') + "Read file " + config.paths.svg_sprite + " error: " + err);
}
console.log(timestamp('[hh:mm:ss] ') + "Creating .svg files...");
var parser = new DOMParser();
var svgSpriteContent = parser.parseFromString(data, "image/svg+xml");
var symbols = svgSpriteContent.getElementsByTagName("symbol");
for (var i = 0; i < symbols.length; i++) {
// parse elements from svg sprite
var paths = symbols.item(i).getElementsByTagName("path");
var pathElement = null;
if (paths.length > 1) {
for (var x = 0; x < paths.length; x++) {
var curPath = paths[x];
curPath.setAttribute("fill", config.image.color);
pathElement = pathElement + curPath.toString()
}
} else {
var curPath = paths[0];
curPath.setAttribute("fill", config.image.color);
pathElement = curPath.toString()
}
var symbolId = symbols.item(i).getAttribute("id");
var viewBoxVal = symbols.item(i).getAttribute("viewBox");
var fileHeader = "<svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none;\" viewBox=\"" + viewBoxVal + "\">";
var fileFooter = "</svg>";
// create separate svg files
fs.writeFile("./build/svg_files_" + colorName + "/" + symbolId + ".svg",
fileHeader + pathElement + fileFooter,
function (err) {
if (err) {
return console.log(timestamp('[hh:mm:ss] ') + err);
}
});
}
console.log(timestamp('[hh:mm:ss] ') + "SVG separate files were created");
console.log(timestamp('[hh:mm:ss] ') + "Creating .png files...");
gulp.src("./build/svg_files_" + colorName + "/*.svg")
.pipe(svg2png())
.pipe(gulp.dest("./build/png_files_" + colorName))
.on('end', function() {
console.log(timestamp('[hh:mm:ss] ') + "PNG files were created");
console.log(timestamp('[hh:mm:ss] ') + "Resizing PNG files...");
gulp.src("./build/png_files_" + colorName + "/*.png")
.pipe(graphicsmagick(function(gmfile) {
return gmfile.resize(config.image.width, config.image.height);
}))
.pipe(gulp.dest("./build/png_files_" + colorName + "_" + config.image.width.toString() + "_" + config.image.height.toString()))
.on('end', function() {
del(["./build/png_files_" + colorName, "./build/svg_files_" + colorName], function(err, paths) {
if (err) {
return console.log(timestamp('[hh:mm:ss] ') + err);
}
});
});
console.log(timestamp('[hh:mm:ss] ') + "PNG files were resized");
});
});
});
/**
* Convert color code to color name
*
* @param {String} colorCode code of color in HEX or RGB format
* @return {String} color name
*/
function getColorName(colorCode) {
var ntcResult = namer.ntc.name(colorCode);
var result = {
'inputColor': colorCode,
'resultColorName': ntcResult[1],
'resultColorHex': ntcResult[0],
'exactMatch?': ntcResult[2]
};
console.log(timestamp('[hh:mm:ss] ') + "Name of color " + colorCode + " is " + result.resultColorName);
return result.resultColorName;
}
/**
* Create folders for file processing
*
* @param {String} colorName
*/
function createFolders(colorName) {
try {
fs.mkdirSync("./build/svg_files_" + colorName);
} catch (e) {
if (e.code == 'EEXIST') {
rmdir("./build/svg_files_" + colorName, function(err, dirs, files) {
console.log(timestamp('[hh:mm:ss] ') + "All files in " + "./build/svg_files_" + colorName + " are removed");
});
} else {
console.log(timestamp('[hh:mm:ss] ') + "Can't make the directory " + "./build/svg_files_" + colorName + " " + e);
}
}
try {
fs.mkdirSync("./build/png_files_" + colorName);
} catch (e) {
if (e.code == 'EEXIST') {
rmdir("./build/png_files_" + colorName, function(err, dirs, files) {
console.log(timestamp('[hh:mm:ss] ') + "All files in " + "./build/png_files_" + colorName + " are removed");
});
} else {
console.log(timestamp('[hh:mm:ss] ') + "Can't make the directory " + "./build/png_files_" + colorName + " " + e);
}
}
try {
fs.mkdirSync("./build/png_files_" + colorName + "_" + config.image.width.toString() + "_" + config.image.height.toString());
} catch (e) {
if (e.code == 'EEXIST') {
rmdir("./build/png_files_" + colorName + "_" + config.image.width.toString() + "_" + config.image.height.toString(), function(err, dirs, files) {
console.log(timestamp('[hh:mm:ss] ') + "All files in " + "./build/png_files_" + colorName + "_" +
config.image.width.toString() + "_" + config.image.height.toString() + " are removed");
});
} else {
console.log(timestamp('[hh:mm:ss] ') + "Can't make the directory " +
"./build/png_files_" + colorName + "_" + config.image.width.toString() + "_" + config.image.height.toString() + " " + e);
}
}
};