-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.babel.js
155 lines (138 loc) · 3.62 KB
/
gulpfile.babel.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
import gulp from "gulp";
import autoprefixer from "autoprefixer";
import browsersync from "browser-sync";
import cssnano from "cssnano";
import del from "del";
import eslint from "gulp-eslint";
import htmlmin from "gulp-htmlmin";
import imagemin from "gulp-imagemin";
import newer from "gulp-newer";
import plumber from "gulp-plumber";
import postcss from "gulp-postcss";
import rename from "gulp-rename";
import sass from "gulp-sass";
import webpack from "webpack";
import webpackstream from "webpack-stream";
import sassGlob from "gulp-sass-glob";
import sourcemaps from "gulp-sourcemaps";
import webpackconfig from "./webpack.config";
browsersync.create();
// project
const project = { root: __dirname };
project.dist = `${project.root}/docs`;
project.assets = `${project.root}/src`;
project.img = `${project.assets}/img`;
project.scss = `${project.assets}/scss`;
project.js = `${project.assets}/js`;
project.fonts = `${project.assets}/fonts`;
project.favicon = `${project.assets}/favicon`;
// BrowserSync
function browserSync(done) {
browsersync.init({
server: {
baseDir: `${project.dist}/`
},
port: 3000
});
done();
}
// BrowserSync Reload
// function browserSyncReload(done) {
// browsersync.reload();
// done();
// }
// Clean assets
function clean() {
return del([`${project.dist}`]);
}
// Copy Favicon Assets
function favicon() {
return gulp.src(`${project.favicon}/**/*`).pipe(gulp.dest(`${project.dist}`));
}
// Minify HTML
function html() {
return gulp
.src(`${project.assets}/*.html`)
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest(`${project.dist}`));
}
// Copy Fonts Assets
function fonts() {
return gulp
.src(`${project.fonts}/**/*`)
.pipe(gulp.dest(`${project.dist}/fonts/`));
}
// Optimize Images
function images() {
return gulp
.src(`${project.img}/**/*`)
.pipe(newer(`${project.dist}/img/`))
.pipe(
imagemin([
imagemin.gifsicle({ interlaced: true }),
imagemin.jpegtran({ progressive: true }),
imagemin.optipng({ optimizationLevel: 5 }),
imagemin.svgo({
plugins: [
{
removeViewBox: false,
collapseGroups: true
}
]
})
])
)
.pipe(gulp.dest(`${project.dist}/img/`));
}
// CSS task
function css() {
return gulp
.src(`${project.scss}/**/*.scss`)
.pipe(plumber())
.pipe(sourcemaps.init())
.pipe(sassGlob())
.pipe(sass({ outputStyle: "expanded" }))
.pipe(gulp.dest(`${project.dist}/css/`))
.pipe(rename({ suffix: ".min" }))
.pipe(postcss([autoprefixer(), cssnano()]))
.pipe(gulp.dest(`${project.dist}/css/`))
.pipe(browsersync.stream());
}
// Lint scripts
function scriptsLint() {
return gulp
.src([`${project.js}/**/*`, "./gulpfile.babel.js"])
.pipe(plumber())
.pipe(eslint())
.pipe(eslint.format());
// .pipe(eslint.failAfterError());
}
// Transpile, concatenate and minify scripts
function scripts() {
return (
gulp
.src([`${project.js}/**/*`])
.pipe(plumber())
.pipe(webpackstream(webpackconfig, webpack))
// folder only, filename is specified in webpack config
.pipe(gulp.dest(`${project.dist}/js/`))
.pipe(browsersync.stream())
);
}
// Watch files
function watchFiles() {
gulp.watch(`${project.assets}/*.html`, html);
gulp.watch(`${project.scss}/**/*`, css);
gulp.watch(`${project.js}/**/*`, gulp.series(scriptsLint, scripts));
gulp.watch(`${project.img}/**/*`, images);
}
// define complex tasks
const js = gulp.series(scriptsLint, scripts);
const build = gulp.series(
clean,
gulp.parallel(html, css, favicon, images, js, fonts)
);
const watch = gulp.parallel(watchFiles, browserSync);
// export tasks
export { html, images, favicon, fonts, css, js, clean, build, watch };
export default build;