/
gulpfile.js
56 lines (44 loc) · 1.4 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
'use strict';
// BUILD DEPENDENCIES
// general file and stream operations
const gulp = require('gulp');
const buffer = require('vinyl-buffer');
const merge = require('merge-stream');
// for css
const cleanCSS = require('gulp-clean-css');
// for png
const spritesmith = require('gulp.spritesmith');
const imageResize = require('gulp-image-resize');
const imgmin = require('gulp-imagemin');
const pngquant = require('imagemin-pngquant');
const appendFacesCSSHeader = spriteCSS => `/* sprites map, autogenerated with gulp.spritesmith */
.faces {
background-image: url(faces.min.png);
width: 45px;
height: 45px;
min-width: 45px;
}
${spriteCSS}`;
gulp.task('faces', function() {
const spriteData = gulp.src([`src/img/faces/*.png`])
.pipe(imageResize({width: 45, height: 45}))
.pipe(spritesmith({
imgName: 'faces.min.png',
cssName: 'faces.min.css',
cssTemplate: function ({sprites}) {
// convert sprites from array of object to css string
const spriteCSS = sprites.map( ({name, offset_x, offset_y}) =>
`.face-${name} {\r\n\tbackground-position: ${offset_x}px ${offset_y}px;\r\n}`
).join("\r\n");
return appendFacesCSSHeader(spriteCSS);
},
}));
const imgStream = spriteData.img
.pipe(buffer())
// .pipe(imgmin([pngquant()]))
.pipe(gulp.dest('dest/'));
const cssStream = spriteData.css
.pipe(cleanCSS())
.pipe(gulp.dest('dest/'));
return merge(imgStream, cssStream);
});