-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
124 lines (105 loc) · 3.91 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
// gulp4-babel7-scss-workflow
// gulp4 babel7 scss autoprefixer imagemin concat uglify browsersync
const gulp = require('gulp'),
del = require('del'),
sourcemaps = require('gulp-sourcemaps'),
plumber = require('gulp-plumber'),
sass = require('gulp-sass'),
autoprefixer = require('gulp-autoprefixer'),
cssnano = require('gulp-cssnano'),
babel = require('gulp-babel'),
webpack = require('webpack-stream'),
uglify = require('gulp-uglify'),
concat = require('gulp-concat'),
imagemin = require('gulp-imagemin'),
browserSync = require('browser-sync').create(),
src_folder = './src/',
src_assets_folder = src_folder + 'assets/',
dist_folder = './dist/',
dist_assets_folder = dist_folder + 'assets/',
node_modules_folder = './node_modules/',
dist_node_modules_folder = dist_folder + 'node_modules/',
node_dependencies = Object.keys(require('./package.json').dependencies || {});
gulp.task('clear', () => del([ dist_folder ]));
gulp.task('html', () => {
return gulp.src([ src_folder + '**/*.html' ], { base: src_folder })
.pipe(gulp.dest(dist_folder))
.pipe(browserSync.stream());
});
gulp.task('sass', () => {
return gulp.src([ src_assets_folder + 'scss/**/*.scss' ])
.pipe(sourcemaps.init())
.pipe(plumber())
.pipe(sass())
.pipe(autoprefixer({
browsers: [ 'last 3 versions', '> 0.5%' ]
}))
// remove comments for unminify
// .pipe(cssnano())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dist_assets_folder + 'css'))
.pipe(browserSync.stream());
});
gulp.task('js', () => {
return gulp.src([ src_assets_folder + 'js/**/*.js' ])
.pipe(plumber())
.pipe(webpack({
mode: 'production'
}))
.pipe(sourcemaps.init())
.pipe(babel({
presets: [ '@babel/env' ]
}))
.pipe(concat('all.js'))
.pipe(uglify())
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest(dist_assets_folder + 'js'))
.pipe(browserSync.stream());
});
gulp.task('images', () => {
return gulp.src([ src_assets_folder + 'images/**/*.+(png|jpg|jpeg|gif|svg|ico)' ])
.pipe(plumber())
.pipe(imagemin())
.pipe(gulp.dest(dist_assets_folder + 'images'))
.pipe(browserSync.stream());
});
gulp.task('vendor', () => {
if (node_dependencies.length === 0) {
return new Promise((resolve) => {
console.log("No dependencies specified");
resolve();
});
}
return gulp.src(node_dependencies.map(dependency => node_modules_folder + dependency + '/**/*.*'), { base: node_modules_folder })
.pipe(gulp.dest(dist_node_modules_folder))
.pipe(browserSync.stream());
});
gulp.task('build', gulp.series('clear', 'html', 'sass', 'js', 'images', 'vendor'));
gulp.task('dev', gulp.series('html', 'sass', 'js'));
gulp.task('serve', () => {
return browserSync.init({
server: {
baseDir: [ 'dist' ],
port: 3000
},
open: false
});
});
gulp.task('watch', () => {
const watchImages = [
src_assets_folder + 'images/**/*.+(png|jpg|jpeg|gif|svg|ico)'
];
const watchVendor = [];
node_dependencies.forEach(dependency => {
watchVendor.push(node_modules_folder + dependency + '/**/*.*');
});
const watch = [
src_folder + '**/*.html',
src_assets_folder + 'scss/**/*.scss',
src_assets_folder + 'js/**/*.js'
];
gulp.watch(watch, gulp.series('dev')).on('change', browserSync.reload);
gulp.watch(watchImages, gulp.series('images')).on('change', browserSync.reload);
gulp.watch(watchVendor, gulp.series('vendor')).on('change', browserSync.reload);
});
gulp.task('default', gulp.series('build', gulp.parallel('serve', 'watch')));