diff options
Diffstat (limited to 'gulpfile.babel.ts')
-rw-r--r-- | gulpfile.babel.ts | 233 |
1 files changed, 233 insertions, 0 deletions
diff --git a/gulpfile.babel.ts b/gulpfile.babel.ts new file mode 100644 index 000000000..5d3510715 --- /dev/null +++ b/gulpfile.babel.ts | |||
@@ -0,0 +1,233 @@ | |||
1 | import gulp from 'gulp'; | ||
2 | import gulpIf from 'gulp-if'; | ||
3 | import babel from 'gulp-babel'; | ||
4 | import dartSass from 'sass'; | ||
5 | import gulpSass from 'gulp-sass'; | ||
6 | import csso from 'gulp-csso'; | ||
7 | import terser from 'gulp-terser'; | ||
8 | import htmlMin from 'gulp-htmlmin'; | ||
9 | import connect from 'gulp-connect'; | ||
10 | import sassVariables from 'gulp-sass-variables'; | ||
11 | import { removeSync, outputJson } from 'fs-extra'; | ||
12 | import kebabCase from 'kebab-case'; | ||
13 | import hexRgb from 'hex-rgb'; | ||
14 | import ts from 'gulp-typescript'; | ||
15 | |||
16 | import * as buildInfo from 'preval-build-info'; | ||
17 | import config from './package.json'; | ||
18 | |||
19 | import rawStyleConfig from './scripts/theme/default/legacy'; | ||
20 | |||
21 | import 'dotenv/config'; | ||
22 | |||
23 | const sass = gulpSass(dartSass); | ||
24 | |||
25 | const isDevBuild = process.env.NODE_ENV === 'development'; | ||
26 | |||
27 | const getTargetEnv = isDevBuild ? 'development' : 'production'; | ||
28 | |||
29 | const tsProject = ts.createProject('tsconfig.json'); | ||
30 | |||
31 | const styleConfig = Object.keys(rawStyleConfig).map(key => { | ||
32 | const isHex = /^#[\da-f]{6}$/i.test(rawStyleConfig[key]); | ||
33 | return { | ||
34 | [`$raw_${kebabCase(key)}`]: isHex | ||
35 | ? hexRgb(rawStyleConfig[key], { format: 'array' }).splice(0, 3).join(',') | ||
36 | : rawStyleConfig[key], | ||
37 | }; | ||
38 | }); | ||
39 | |||
40 | const paths = { | ||
41 | src: 'src', | ||
42 | dest: 'build', | ||
43 | tmp: '.tmp', | ||
44 | dist: 'out', | ||
45 | package: `out/${config.version}`, | ||
46 | buildInfoDestFile: 'build/buildInfo.json', | ||
47 | recipes: { | ||
48 | src: 'recipes/archives/*.tar.gz', | ||
49 | dest: 'build/recipes/', | ||
50 | }, | ||
51 | recipeInfo: { | ||
52 | src: 'recipes/*.json', | ||
53 | dest: 'build/recipes/', | ||
54 | }, | ||
55 | html: { | ||
56 | src: 'src/**/*.html', | ||
57 | dest: 'build/', | ||
58 | watch: 'src/**/*.html', | ||
59 | }, | ||
60 | styles: { | ||
61 | src: [ | ||
62 | 'src/styles/main.scss', | ||
63 | 'src/styles/vertical.scss', | ||
64 | 'src/styles/animations.scss', | ||
65 | ], | ||
66 | dest: 'build/styles', | ||
67 | watch: 'src/styles/**/*.scss', | ||
68 | }, | ||
69 | javascript: { | ||
70 | src: ['src/**/*.js', 'src/**/*.jsx'], | ||
71 | dest: 'build/', | ||
72 | watch: ['src/**/*.js', 'src/**/*.jsx'], | ||
73 | }, | ||
74 | typescript: { | ||
75 | src: ['src/**/*.ts', 'src/**/*.tsx'], | ||
76 | dest: 'build/', | ||
77 | watch: ['src/**/*.ts', 'src/**/*.tsx'], | ||
78 | }, | ||
79 | }; | ||
80 | |||
81 | const clean: (done: any) => void = done => { | ||
82 | removeSync(paths.tmp); | ||
83 | removeSync(paths.dest); | ||
84 | removeSync(paths.dist); | ||
85 | |||
86 | done(); | ||
87 | }; | ||
88 | |||
89 | function mvSrc() { | ||
90 | return gulp | ||
91 | .src( | ||
92 | [ | ||
93 | `${paths.src}/*`, | ||
94 | `${paths.src}/*/**`, | ||
95 | `!${paths.javascript.watch[0]}`, | ||
96 | `!${paths.typescript.watch[0]}`, | ||
97 | `!${paths.src}/styles/**`, | ||
98 | ], | ||
99 | { since: gulp.lastRun(mvSrc) }, | ||
100 | ) | ||
101 | .pipe(gulp.dest(paths.dest)); | ||
102 | } | ||
103 | |||
104 | function mvPackageJson() { | ||
105 | return gulp.src(['./package.json']).pipe(gulp.dest(paths.dest)); | ||
106 | } | ||
107 | |||
108 | function BuildInfo() { | ||
109 | const buildInfoData = { | ||
110 | timestamp: buildInfo.timestamp, | ||
111 | gitHashShort: buildInfo.gitHashShort, | ||
112 | gitBranch: buildInfo.gitBranch, | ||
113 | }; | ||
114 | return outputJson(paths.buildInfoDestFile, buildInfoData); | ||
115 | } | ||
116 | |||
117 | function html() { | ||
118 | return gulp | ||
119 | .src(paths.html.src, { since: gulp.lastRun(html) }) | ||
120 | .pipe( | ||
121 | gulpIf( | ||
122 | !isDevBuild, | ||
123 | htmlMin({ | ||
124 | // Only minify in production to speed up dev builds | ||
125 | collapseWhitespace: true, | ||
126 | removeComments: true, | ||
127 | }), | ||
128 | ), | ||
129 | ) | ||
130 | .pipe(gulp.dest(paths.html.dest)) | ||
131 | .pipe(connect.reload()); | ||
132 | } | ||
133 | |||
134 | function styles(): NodeJS.ReadWriteStream { | ||
135 | return gulp | ||
136 | .src(paths.styles.src) | ||
137 | .pipe( | ||
138 | sassVariables( | ||
139 | Object.assign( | ||
140 | { | ||
141 | $env: getTargetEnv, | ||
142 | }, | ||
143 | ...styleConfig, | ||
144 | ), | ||
145 | ), | ||
146 | ) | ||
147 | .pipe( | ||
148 | sass({ | ||
149 | includePaths: ['./node_modules', '../node_modules'], | ||
150 | }).on('error', sass.logError), | ||
151 | ) | ||
152 | .pipe( | ||
153 | gulpIf( | ||
154 | !isDevBuild, | ||
155 | csso({ | ||
156 | // Only minify in production to speed up dev builds | ||
157 | restructure: false, // Don't restructure CSS, otherwise it will break the styles | ||
158 | }), | ||
159 | ), | ||
160 | ) | ||
161 | .pipe(gulp.dest(paths.styles.dest)) | ||
162 | .pipe(connect.reload()); | ||
163 | } | ||
164 | |||
165 | function processJavascript() { | ||
166 | return gulp | ||
167 | .src(paths.javascript.src, { since: gulp.lastRun(processJavascript) }) | ||
168 | .pipe( | ||
169 | babel({ | ||
170 | comments: false, | ||
171 | }), | ||
172 | ) | ||
173 | .pipe(gulpIf(!isDevBuild, terser())) // Only uglify in production to speed up dev builds | ||
174 | .pipe(gulp.dest(paths.javascript.dest)) | ||
175 | .pipe(connect.reload()); | ||
176 | } | ||
177 | |||
178 | function processTypescript() { | ||
179 | return gulp | ||
180 | .src(paths.typescript.src, { since: gulp.lastRun(processTypescript) }) | ||
181 | .pipe(tsProject()) | ||
182 | .js.pipe( | ||
183 | babel({ | ||
184 | comments: false, | ||
185 | }), | ||
186 | ) | ||
187 | .pipe(gulpIf(!isDevBuild, terser())) // Only uglify in production to speed up dev builds | ||
188 | .pipe(gulp.dest(paths.typescript.dest)) | ||
189 | .pipe(connect.reload()); | ||
190 | } | ||
191 | |||
192 | function watch() { | ||
193 | gulp.watch(paths.styles.watch, styles); | ||
194 | |||
195 | gulp.watch([paths.src], mvSrc); | ||
196 | |||
197 | gulp.watch(paths.javascript.watch, processJavascript); | ||
198 | gulp.watch(paths.typescript.watch, processTypescript); | ||
199 | } | ||
200 | |||
201 | function webserver() { | ||
202 | connect.server({ | ||
203 | root: paths.dest, | ||
204 | livereload: true, | ||
205 | }); | ||
206 | } | ||
207 | |||
208 | function recipes() { | ||
209 | return gulp | ||
210 | .src(paths.recipes.src, { since: gulp.lastRun(recipes) }) | ||
211 | .pipe(gulp.dest(paths.recipes.dest)); | ||
212 | } | ||
213 | |||
214 | function recipeInfo() { | ||
215 | return gulp | ||
216 | .src(paths.recipeInfo.src, { since: gulp.lastRun(recipeInfo) }) | ||
217 | .pipe(gulp.dest(paths.recipeInfo.dest)); | ||
218 | } | ||
219 | |||
220 | export const build = gulp.series( | ||
221 | clean, | ||
222 | gulp.parallel(mvSrc, mvPackageJson, BuildInfo), | ||
223 | gulp.parallel( | ||
224 | html, | ||
225 | processJavascript, | ||
226 | processTypescript, | ||
227 | styles, | ||
228 | recipes, | ||
229 | recipeInfo, | ||
230 | ), | ||
231 | ); | ||
232 | |||
233 | export const dev = gulp.series(build, gulp.parallel(webserver, watch)); | ||