-
Notifications
You must be signed in to change notification settings - Fork 1
/
gulpfile.babel.js
119 lines (99 loc) · 3.07 KB
/
gulpfile.babel.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
'use strict';
import gulp from 'gulp';
import path from 'path';
import gulpLoadPlugins from 'gulp-load-plugins';
import filenames from 'gulp-filenames';
import toPascalCase from 'to-pascal-case';
import changeCase from 'change-case';
import del from 'del';
const $ = gulpLoadPlugins({});
const PREFIX = '';
const CLASSNAME = 'glyphs';
let spawn = require('child_process').spawn;
let fileList = [];
function cap(string) {
return string.charAt(0).toUpperCase() + string.slice(1);
}
gulp.task('svg', () =>
gulp.src('./svg/**/*.svg')
.pipe(filenames("svg"))
.pipe($.svgmin((file) => {
let name = path.basename(file.relative, path.extname(file.relative));
return {
plugins:[
{removeDoctype: true},
{addAttributesToSVGElement: { attribute: 'classNameString' }},
{removeTitle: true},
{removeStyleElement: true},
{removeAttrs: { attrs: ['id', 'class', 'data-name', 'fill'] }},
{removeEmptyContainers: true},
{sortAttrs: true},
{removeUselessDefs: true},
{removeEmptyText: true},
{removeEditorsNSData: true},
{removeEmptyAttrs: true},
{removeHiddenElems: true},
{collapseGroups: false},
]
}
}))
.pipe($.insert.transform((content, file) => {
let name = toPascalCase(cap(path.basename(file.relative, path.extname(file.relative))));
fileList = filenames.get("svg");
let component = `
import React, { Component } from 'react';
export default class ${name}${PREFIX} extends Component {
static defaultProps = {
className: ''
};
constructor(props) {
super(props);
}
render() {
return (
${content}
)
}
}`;
return component;
}))
.pipe($.extReplace('.js'))
.pipe($.rename((path) => {
path.basename = `${toPascalCase(cap(path.basename))}${PREFIX}`
}))
.pipe(gulp.dest('./dist'))
)
gulp.task('replace', () => {
return gulp.src('./dist/*.js')
.pipe($.tap((file) => {
let fileName = path.basename(file.path);
let className = changeCase.lowerCase(changeCase.headerCase(fileName.replace('.js', '')));
return gulp.src('./dist/' + fileName)
.pipe($.replace(
"classNameString",
`{...this.props} className={\`${CLASSNAME} ${CLASSNAME}-${className} \${this.props.className\}\`}`
))
.pipe($.replace(/xmlns:xlink=".+?"/g, ``))
.pipe($.replace(/xlink:href=".+?"/g, ``))
.pipe($.replace("fill-rule=", "fillRule="))
.pipe($.replace("stop-color=", "stopColor="))
.pipe(gulp.dest('./dist'));
}));
});
gulp.task('clear', (cb) => {
del(['dist']);
return cb();
});
gulp.task('gulp-reload', () => {
spawn('./node_modules/.bin/gulp', ['default'], {stdio: 'inherit'});
process.exit();
});
gulp.task('watch', () => {
gulp.watch('gulpfile.babel.js', gulp.series('gulp-reload'));
});
gulp.task('build', gulp.series(
'clear', 'svg', 'replace'
))
gulp.task('default', gulp.series(
'build', 'watch'
))