-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgulpfile.js
130 lines (117 loc) · 3.57 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
const del = require('del')
const sass = require('gulp-sass')
const postcss = require('gulp-postcss')
const sourcemaps = require('gulp-sourcemaps')
const rename = require('gulp-rename')
const babel = require('gulp-babel')
const rtlcss = require('gulp-rtlcss')
const gulp = require('gulp')
const babelrc = require('./babel.config')
const ESM_DIR = './es'
const LIB_DIR = './lib'
const DIST_DIR = './dist'
const STYLE_SOURCE_DIR = './components/styles'
const STYLE_DIST_DIR = './dist/styles'
const TS_SOURCE = ['./components/**/*.tsx', './components/**/*.ts', '!./components/**/*.d.ts']
const THEMES = ['default']
function clean(done) {
del.sync([LIB_DIR, ESM_DIR, DIST_DIR], { force: true })
done()
}
function buildSass() {
return THEMES.map(theme => {
const taskName = `buildSass:${theme}`
gulp.task(taskName, () =>
gulp
.src(`${STYLE_SOURCE_DIR}/themes/${theme}/index.scss`)
.pipe(sourcemaps.init())
.pipe(sass({ outputStyle: 'compressed' }))
.pipe(postcss([require('autoprefixer')]))
.pipe(sourcemaps.write('./'))
.pipe(rename(`rouui-${theme}.css`))
.pipe(gulp.dest(`${STYLE_DIST_DIR}`))
)
return taskName
})
}
function buildCSS() {
return THEMES.map(theme => {
const taskName = `buildCSS:${theme}`
gulp.task(taskName, () =>
gulp
.src(`${STYLE_DIST_DIR}/rouui-${theme}.css`)
.pipe(sourcemaps.init())
.pipe(postcss())
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(`${STYLE_DIST_DIR}`))
)
return taskName
})
}
function buildRTLCSS() {
return THEMES.map(theme => {
const taskName = `buildRTLCSS:${theme}`
gulp.task(taskName, () =>
gulp
.src(`${STYLE_DIST_DIR}/rouui-${theme}.css`)
.pipe(rtlcss()) // Convert to RTL.
.pipe(rename({ suffix: '-rtl' })) // Append "-rtl" to the filename.
.pipe(gulp.dest(`${STYLE_DIST_DIR}`))
.pipe(sourcemaps.init())
.pipe(postcss())
.pipe(rename({ suffix: '.min' }))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest(`${STYLE_DIST_DIR}`))
)
return taskName
})
}
function buildLib() {
return gulp.src(TS_SOURCE).pipe(babel(babelrc())).pipe(gulp.dest(LIB_DIR))
}
function buildEsm() {
return gulp
.src(TS_SOURCE)
.pipe(
babel(
babelrc(null, {
NODE_ENV: 'esm'
})
)
)
.pipe(gulp.dest(ESM_DIR))
}
function copyFontFiles() {
return gulp.src(`${STYLE_SOURCE_DIR}/fonts/**/*`).pipe(gulp.dest(`${STYLE_DIST_DIR}/fonts`))
}
function copyTypescriptDeclarationFiles() {
return gulp.src('./components/**/*.d.ts').pipe(gulp.dest(LIB_DIR)).pipe(gulp.dest(ESM_DIR))
}
function copyScssFiles() {
return gulp
.src(['./components/**/*.scss', './components/**/fonts/**/*'])
.pipe(gulp.dest(LIB_DIR))
.pipe(gulp.dest(ESM_DIR))
}
function watch() {
const watcher = gulp.watch(TS_SOURCE)
watcher.on('change', (filePath, stats) => {
console.log('File ' + filePath + ' was changed, running tasks...')
const libPath = filePath.replace('components/', 'lib/').replace(/\/[a-z|A-Z]+.(tsx|ts)/, '')
return gulp.src(filePath).pipe(babel(babelrc())).pipe(gulp.dest(libPath))
})
}
exports.buildStyle = gulp.series(
clean,
...buildSass(),
...buildCSS(),
...buildRTLCSS(),
copyFontFiles
)
exports.dev = gulp.series(clean, buildLib, watch)
exports.build = gulp.series(
clean,
gulp.parallel(buildLib, buildEsm, gulp.series(...buildSass(), ...buildCSS(), ...buildRTLCSS())),
gulp.parallel(copyTypescriptDeclarationFiles, copyScssFiles, copyFontFiles)
)