-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
186 lines (172 loc) · 4.79 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
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
/* eslint-env node */
const { src, dest, series, parallel, watch } = require('gulp');
const sourcemaps = require('gulp-sourcemaps');
const replace = require('gulp-replace');
require('dotenv').config();
// live reloading
const browserSync = require('browser-sync').create();
// css optimization
const postcss = require('gulp-postcss');
const cssnano = require('cssnano');
const autoprefixer = require('autoprefixer');
// js optimization
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const terser = require('gulp-terser');
// image optimization
const imagemin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
function replaceApi(done) {
src(['./index.html'])
.pipe(replace('GOOGLEMAP_API_KEY', process.env.API_KEY))
.pipe(dest('./dist'));
done();
}
/**
* @function watchTestFiles
* @description watch unit testing files -- spec and src js files
*/
function watchTestFiles() {
browserSync.init({
server: './',
});
watch(['js/app.js']).on('change', browserSync.reload);
}
/**
* @function watchFiles
* @description watch css, js and html files
*/
function watchFiles(done) {
browserSync.init({
server: './dist',
});
// Update the "default" Task, calling .init on browserSync starts the server.
watch('css/**/*.css', series('styles'));
watch('js/**/*.js', series('scripts'));
watch('index.html', series('copyHTML'));
watch('./dist/index.html').on('change', browserSync.reload);
done();
}
/**
* @function copyFont
* @description load font files and pipe to dest folder
*/
function copyFont(done) {
src('fonts/*').pipe(dest('./dist/fonts'));
done();
}
/**
* @function copyHTML
* @description load html files and pipe to dest folder
*/
function copyHTML(done) {
src('./index.html').pipe(dest('./dist'));
done();
}
/**
* @function copyImages
* @description load images, minified it for development production and pipe to dest folder
*/
function copyImages() {
return src('img/site_images/**/*')
.pipe(
imagemin({
progressive: true,
use: [pngquant()],
})
)
.pipe(dest('./dist/img/site_images/'));
}
/**
* @function scripts
* @description load js files and concat it for development and pipe to dest folder
*/
function scripts(done) {
src(['js/**/*.js'])
.pipe(sourcemaps.init())
.pipe(
babel({
presets: ['@babel/preset-env'],
})
)
.pipe(concat('app.js'))
.pipe(sourcemaps.write())
.pipe(dest('dist/js'))
.pipe(browserSync.stream());
done();
}
/**
* @function polyfillScripts
* @description load polyfills and pipe to dest folder
*/
function polyfillScripts(done) {
src(['polyfilljs/polyfill.min.js'])
.pipe(dest('dist/polyfilljs'));
done();
}
/**
* @function distScripts
* @description load js files, concat, minified it for production and pipe to dest folder
*/
function distScripts(done) {
src('js/**/*.js')
.pipe(sourcemaps.init())
.pipe(
babel({
presets: ['@babel/preset-env'],
})
)
.pipe(concat('app.js'))
.pipe(terser())
.pipe(sourcemaps.write())
.pipe(dest('dist/js'));
done();
}
/**
* @function styles
* @description load css files, add vendor prefixes for development and pipe to dest folder
*/
function styles(done) {
let processors = [
autoprefixer({
overrideBrowserslist: ['last 2 versions'],
})
];
src('css/**/*.css')
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.init())
.pipe(dest('dist/css'))
.pipe(browserSync.stream()); // Update the "styles" Function
done();
}
/**
* @function distStyles
* @description load css files, concat and minified it for production and pipe to dest folder
*/
function distStyles() {
let processors = [
autoprefixer({
overrideBrowserslist: ['last 2 versions'],
}),
cssnano
];
return src('css/**/*.css')
.pipe(sourcemaps.init())
.pipe(postcss(processors))
.pipe(sourcemaps.init())
.pipe(dest('dist/css'))
.pipe(browserSync.stream()); // Update the "styles" Function
}
exports.styles = styles;
exports.copyFont = copyFont;
exports.copyImages = copyImages;
exports.copyHTML = copyHTML;
exports.scripts = scripts;
exports.distScripts = distScripts;
exports.distStyles = distStyles;
exports.replaceApi = replaceApi;
// For development
exports.default = series(copyFont, copyHTML, copyImages, styles, scripts, polyfillScripts, replaceApi, watchFiles);
// For production
exports.dist = series(copyFont, copyHTML, replaceApi, copyImages, distStyles, distScripts, polyfillScripts);