-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
107 lines (97 loc) · 2.53 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
const { src, dest, parallel } = require('gulp');
const watch = require('gulp-watch');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const sassGlob = require('gulp-sass-glob');
const svgSprite = require('gulp-svg-sprite');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const basePath = './includes/';
const paths = {
scss : `${basePath}sass/`,
icons : `${basePath}img/icons/`,
css : `${basePath}build/css/`,
img : `${basePath}build/img/`,
backgroundImage: {
src: `${basePath}img/flags`,
scss: '../../sass/sprite/_spritesheet.scss',
template: `${basePath}sass/sprite/_sprite-template.scss`
},
};
function styles () {
return src(`${paths.scss}/*.scss`)
.pipe(plumber({ errorHandler: function(err) {
notify.onError({
title: "Gulp error in " + err.plugin
})(err);
}}))
.pipe(sassGlob())
.pipe(sourcemaps.init())
.pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
.pipe(sourcemaps.write('./'))
.pipe(dest(`${paths.css}`))
.pipe(notify('compiled css'));
}
function watchStyles() {
return styles()
.pipe(watch(`${paths.scss}**/*.scss`, styles));
}
function sprite () {
return src(`${paths.icons}**/*.svg`)
.pipe(svgSprite({
mode: {
symbol: {
render: {
css: false,
scss: false,
},
dest: `${paths.img}`,
sprite: 'icons.svg',
example: true // sweet! automatically generete demo html page
}
}
}))
.pipe(dest('./'))
.pipe(notify('compiled svg sprite'));
}
function watchSprite() {
return sprite()
.pipe(watch(`${paths.icons}**/.svg`, sprite));
}
function bgImg() {
return src(`${paths.backgroundImage.src}**/*.svg`)
.pipe(svgSprite({
shape: {
spacing: {
padding: 5
}
},
mode: {
css: {
dest: `${paths.img}`,
sprite: 'flags.svg',
bust: false,
render: {
scss: {
dest: `${paths.backgroundImage.scss}`,
template: `${paths.backgroundImage.template}`,
}
}
}
}
}))
.pipe(dest('./'))
.pipe(notify('compiled svg background-image'))
}
function watchBgImg() {
return bgImg()
.pipe(watch(`${paths.backgroundImage.src}**/.svg`, sprite));
}
exports.styles = styles;
exports.watchStyles = watchStyles;
exports.sprite = sprite;
exports.watchSprite = watchSprite;
exports.bgImg = bgImg;
exports.watchBgImg = watchBgImg;
exports.watch = parallel(watchStyles, watchSprite, watchBgImg);
exports.default = parallel(styles, sprite, bgImg);