-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.mjs
157 lines (129 loc) · 3.4 KB
/
gulpfile.mjs
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
151
152
153
154
155
156
157
import gulp from 'gulp';
const { task, watch, src, dest, series, parallel } = gulp;
import browserSync from 'browser-sync';
import * as dartSass from 'sass';
import gulpSass from 'gulp-sass';
const sass = gulpSass(dartSass);
import {deleteSync} from 'del';
import minify from 'gulp-html-minifier-terser';
import postcss from 'gulp-postcss';
import autoprefixer from 'autoprefixer';
import cssnano from 'cssnano';
import sourcemap from 'gulp-sourcemaps';
import plumber from 'gulp-plumber';
import rename from 'gulp-rename';
import webp from 'gulp-webp';
import sharpOptimizeImages from 'gulp-sharp-optimize-images';
import svgstore from 'gulp-svgstore';
import svgmin from 'gulp-svgmin';
import webpack from 'webpack-stream';
/* Run BrowserSync server */
task('server', () => {
browserSync({
server: {
baseDir: 'build/',
}
});
watch('build/*.html').on('change', browserSync.reload);
});
/* Compile SCSS styles */
task('styles', () => {
return src('src/sass/style.scss')
.pipe(plumber())
.pipe(sourcemap.init())
.pipe(sass().on('error', sass.logError))
.pipe(postcss([
autoprefixer(),
cssnano(),
]))
.pipe(rename('style.min.css'))
.pipe(sourcemap.write('.'))
.pipe(dest('build/css'))
.pipe(browserSync.stream());
});
/* Bundle JavaScript modules */
task('scripts', () => {
return src('src/js/main.js')
.pipe(webpack({
// mode: 'development',
mode: 'production',
output: {
filename: 'main.min.js',
},
}))
.pipe(dest('build/js'))
// .pipe(browserSync.stream());
});
/* Copy and minify HTML */
task('html', () => {
return src('src/*.html')
.pipe(minify({ collapseWhitespace: true }))
.pipe(dest('build'));
});
/* Create .webp images from .png and .jpg */
task('webp', () => {
return src('src/img/**/*.{jpg,png}', {encoding: false})
.pipe(webp({quality: 90}))
.pipe(dest('build/img'));
});
/* Watch changes in files */
task('watch', () => {
watch('src/sass/**/*.scss', series('styles'));
watch('src/*.html', series('html'));
watch('src/js/**/*.js', series('scripts'));
});
/* Empty build folder */
task('clean', (done) => {
deleteSync('build');
done();
});
/* Copy files from src to build */
task('copyFiles', (done) => {
src([
'src/*.ico',
'src/fonts/**/*',
'src/files/**/*',
'src/site.webmanifest',
'src/browserconfig.xml',
], {
encoding: false,
base: 'src',
})
.pipe(dest('build'));
done();
});
/* Copy images from src to build */
task('copyImages', (done) => {
src('src/img/**/*.{png,jpg}', {
encoding: false,
})
.pipe(dest('build/img'))
done();
});
/* Compress images for build */
task('optimizeImages', () => {
return src('src/img/**/*.{png,jpg}')
.pipe(sharpOptimizeImages({
png_to_png: {
quality: 80,
},
jpg_to_jpg: {
quality: 80,
mozjpeg: true,
},
}))
.pipe(dest('build/img'))
});
/* Combine svg icons into one sprite */
task('sprite', () => {
return src('src/img/icons/*.svg')
.pipe(svgmin())
.pipe(svgstore({
inlineSvg: true,
}))
.pipe(rename('sprite.svg'))
.pipe(dest('build/img'));
});
/* Run main gulp task */
task('default', parallel('clean', 'copyFiles', 'copyImages', 'styles', 'scripts', 'html', 'webp', 'sprite', 'server', 'watch'));
task('build', parallel('clean', 'copyFiles', 'optimizeImages', 'styles', 'scripts', 'html', 'webp', 'sprite'));