-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
134 lines (119 loc) · 3.05 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
'use strict';
const gulp = require('gulp');
const $ = require('gulp-load-plugins')();
const autoprefixer = require('autoprefixer');
const browserSync = require('browser-sync');
const del = require('del');
const base = {
src: './src/',
dist: './dist/'
};
const paths = {
scss: {
src: 'src/assets/scss/*.scss',
},
css: {
base: 'src/assets/css',
src: ['src/assets/css/*.css', '!src/assets/css/*.min.css'],
dist: 'dist/assets/css',
},
images: {
src: 'src/assets/images/*',
dist: 'dist/assets/images/'
},
copy: {
src: [
'src/*.html',
'src/assets/js/**/*',
'src/assets/images/**/*',
'src/assets/fonts/**/*'
]
}
}
// Scope of browsers to be supported
const processors = [
autoprefixer({browsers: ['last 2 versions']})
];
// Configure static server with BrowserSync
gulp.task('browser-sync', () => {
browserSync.init({
server: {
baseDir: "./src/",
browser: ['google chrome']
}
});
});
// Reload browser
gulp.task('bs-reload', () => {
browserSync.reload();
});
// Compile Sass in development environment with Sourcemaps
gulp.task('sass', () => {
function onError(err) {
$.notify.onError({
title: 'Groundwork Lite',
subtitle: 'Ups! Sass build failed 😱',
message: 'Error: <%= error.message %>'
})(err);
this.emit('end');
};
return gulp.src(paths.scss.src)
.pipe($.plumber({errorHandler: onError}))
.pipe($.sourcemaps.init())
.pipe($.sass({outputStyle: 'expanded'}))
.pipe($.postcss(processors))
.pipe($.sourcemaps.write('.'))
.pipe(gulp.dest(paths.css.base))
.pipe(browserSync.stream())
.pipe($.plumber.stop())
.pipe($.notify({
title: 'Groundwork Lite',
message: 'Yeah! Sass compiled without problems 👌',
onLast: true
}))
});
// Clean /dist directory
gulp.task('clean', () => {
del(['dist/**/*']);
});
// Copy all other files and folders from /src to /dist
gulp.task('copy', () => {
return gulp.src(paths.copy.src, { base: 'src' })
.pipe(gulp.dest(base.dist));
});
// Stylesheets for production environment with minified version
gulp.task('styles', () => {
function onError(err) {
$.notify.onError({
title: 'Groundwork Lite',
subtitle: 'Ups! Sass build failed 😱',
message: 'Error: <%= error.message %>'
})(err);
this.emit('end');
};
return gulp.src(paths.scss.src)
.pipe($.plumber({errorHandler: onError}))
.pipe($.sass({outputStyle: 'expanded'}))
.pipe($.postcss(processors))
.pipe(gulp.dest(paths.css.dist))
.pipe($.cssnano({
discardUnused: {
fontFace: false
}
}))
.pipe($.rename({suffix: '.min'}))
.pipe(gulp.dest(paths.css.dist))
.pipe($.plumber.stop())
.pipe($.notify({
title: 'Gulp Styles',
message: 'Yeah! Stylesheets created without problems 👌',
onLast: true
}))
});
// Build /dist folder
gulp.task('build', ['clean', 'copy', 'styles']);
// Watch sass files for changes
gulp.task('default', ['browser-sync'], () => {
gulp.watch(base.src + '**/*.scss', ['sass']);
gulp.watch(base.src + '*.html', ['bs-reload']);
});