-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
114 lines (97 loc) · 3.03 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
// Basics
const gulp = require("gulp");
const newer = require("gulp-newer");
const sourcemaps = require("gulp-sourcemaps");
// Build
const concat = require("gulp-concat");
const include = require("gulp-file-include");
const replace = require("gulp-replace");
const inline = require("gulp-inline");
const postCss = require("gulp-postcss");
const preCss = require("precss");
const atomizer = require("gulp-atomizer");
const atomCssConfig = require("./atomCssConfig.js");
const assets = require("postcss-assets");
// Production
const htmlMin = require("gulp-html-minifier-terser");
const SRC = "src";
const DEST = "docs";
// ---------- BUILD ---------- //
const buildJsTask = () =>
gulp.src([
`${SRC}/js/plygrnd.js`,
`${SRC}/js/DOMTools.js`,
`${SRC}/js/initIntro.js`,
`${SRC}/js/initMain.js`,
`${SRC}/js/index.js`
])
.pipe(sourcemaps.init())
.pipe(concat("app.js"))
.pipe(sourcemaps.write())
.pipe(gulp.dest(DEST));
const buildHtmlTask = () =>
gulp.src([`${SRC}/html/index.html`])
.pipe(include())
.pipe(gulp.dest(DEST));
const buildCssAtomsTask = () =>
gulp.src([`${SRC}/**/*.html`])
.pipe(atomizer(atomCssConfig))
.pipe(gulp.dest(`${SRC}/style`));
const buildCssTask = () =>
gulp.src([
`${SRC}/style/_variables.scss`,
`${SRC}/style/common.scss`,
`${SRC}/style/!(_atoms)*.scss`,
`${SRC}/style/z_atoms.scss`
])
.pipe(sourcemaps.init())
.pipe(concat("style.css"))
.pipe(postCss([
preCss({ features: { "color-mod-function": { unresolved: "warn" } } }),
assets({ loadPaths: [SRC] })
]))
.pipe(sourcemaps.write())
.pipe(gulp.dest(DEST));
const copyAssetsTask = () => {
gulp.src([
`${SRC}/CNAME`,
`${SRC}/site.webmanifest`,
`${SRC}/favicon.ico`,
`${SRC}/favicon-32x32.png`,
`${SRC}/favicon-android-chrome-192x192.png`,
`${SRC}/favicon-android-chrome-512x512.png`,
`${SRC}/favicon-apple-touch-icon.png`,
"*v1/**", "*v2/**"
])
.pipe(newer(DEST))
.pipe(gulp.dest(DEST));
return gulp.src([`${SRC}/img/*`])
.pipe(newer(`${DEST}/img`))
.pipe(gulp.dest(`${DEST}/img`));
};
// ---------- PRODUCTION ---------- //
const prodTask = () =>
gulp.src([`${DEST}/index.html`])
.pipe(inline({
// base: DEST,
disabledTypes: ["img"/*, "svg", "js", "css"*/]
}))
.pipe(replace(/(<!-- buildDev:start -->)[\s\S]+(<!-- buildDev:end -->)/, ""))
.pipe(htmlMin({
collapseWhitespace: true,
minifyCSS: true,
minifyJS: true,
removeAttributeQuotes: true,
removeComments: true,
removeRedundantAttributes: true
}))
.pipe(gulp.dest(DEST));
const buildTask = gulp.parallel(buildJsTask, buildHtmlTask, gulp.series(buildCssAtomsTask, buildCssTask), copyAssetsTask);
exports.dev = gulp.series(buildTask, function watchTask() {
gulp.watch([`${SRC}/js/*.js`], buildJsTask);
gulp.watch([`${SRC}/**/*.html`], buildHtmlTask);
gulp.watch([`${SRC}/style/*.scss`, `!${SRC}/style/z_atoms.scss`, `${SRC}/**/*.html`], gulp.series(buildCssAtomsTask, buildCssTask));
gulp.watch([`${SRC}/img/**`], gulp.parallel(copyAssetsTask));
});
exports.build = gulp.series(buildTask, prodTask);
exports.default = exports.build;