-
Notifications
You must be signed in to change notification settings - Fork 5
/
gulpfile.js
200 lines (183 loc) · 5.2 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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
"use strict";
const gulp = require("gulp");
//sass processing
const postcss = require("gulp-postcss");
const sourcemaps = require("gulp-sourcemaps");
//image optimization
const path = require("path");
const fs = require("fs");
const dirCompare = require("dir-compare");
const imagemin = require("gulp-imagemin");
const imageResize = require("gulp-image-resize");
const rename = require("gulp-rename");
const del = require("del");
const glob = require("glob");
const runSequence = require("run-sequence");
/**
* Css processing
*/
gulp.task("css", (done) => {
gulp
.src("./_css/*.css")
.pipe(sourcemaps.init())
.pipe(postcss())
.pipe(sourcemaps.write("."))
.pipe(gulp.dest("./assets"));
done();
});
/** Watch
*
*/
gulp.task("watch", () => {
gulp.watch("./_css/*.css", gulp.series(["css"]));
});
/**
* Image optimization
*
* Usage: add original files to the source folder, optimized images will be
* copied to the destination folder
*
* tasks: img:cleanup - remove images from the destination folder
* img:minimize - minimize original images and add results to target folder
* img:generatesizes - generate sized versions of images in target folder
*
* source folder: assets/_raw_images
* target folder: assets/images
*
* @warning - your original files cannot end in _[0-9]*
*/
const srcDir = "assets/_raw_images";
const destDir = "assets/images";
// Configuration object of responsive image sizes
// details of image design are described in docs/responsive-design.md
const responsiveImgGenConfig = [
{
src: srcDir + "/post-thumbs/*",
widths: [640, 128],
dest: destDir + "/post-thumbs/",
},
// {
// src: srcDir + "/site-greeting/*",
// widths: [1920],
// dest: destDir + "/site-greeting/",
// },
// {
// src: srcDir + "/in-content/*",
// widths: [768],
// dest: destDir + "/in-content/",
// },
];
gulp.task("default", () => {
console.log("Use gulp img:add to add new images");
});
// Task for removing all images in destination folder
gulp.task("img:cleanup", () => {
del(destDir + "/**");
});
// Task to copy and minimize original images from source dir to dest dir
// this task will only add new images and skips existing images
gulp.task("img:minimize", () => {
let files = [];
// find the files that are present in the source dir but not in dest
for (let entry of dirCompare.compareSync(srcDir, destDir).diffSet) {
entry.state === "left" ? files.push(entry.path1 + "/" + entry.name1) : null;
}
console.log("Moving " + files.length + " new image(s).");
return gulp
.src(files, { base: srcDir })
.pipe(
imagemin([
imagemin.gifsicle({ interlaced: true }),
imagemin.jpegtran({ progressive: true }),
imagemin.optipng({ optimizationLevel: 5 }),
imagemin.svgo({
plugins: [{ removeViewBox: true }, { cleanupIDs: false }],
}),
])
)
.pipe(gulp.dest(destDir));
});
// Task to generate various image sizes from originals based on the config object
// this task will generate missing images only
gulp.task("img:generatesizes", () => {
const readFileList = new Promise((resolve, reject) => {
glob(destDir + "/**/!(*_[0-9]*).{png,gif,jpg,jpeg}", (err, files) => {
if (!err) {
resolve(files);
} else {
reject(err);
}
});
});
const checkFileSizesExist = (file) => {
return new Promise((resolve, reject) => {
fs.access(file[0], (err) => {
if (err) {
resolve(file);
} else {
resolve("OK");
}
});
});
};
return readFileList
.then((files) => {
let fileList = [];
for (let file of files) {
for (let config of responsiveImgGenConfig) {
if (file.match(config.dest)) {
for (let width of config.widths) {
// fileList.push('./' + path.parse(file).dir + '/' + path.parse(file).name + '_' + width.toString() + path.parse(file).ext)
fileList.push([
"./" +
path.parse(file).dir +
"/" +
path.parse(file).name +
"_" +
width.toString() +
path.parse(file).ext,
file,
width,
config.dest,
]);
}
}
}
}
return Promise.all(fileList.map(checkFileSizesExist));
})
.catch((err) => {
console.log("someting went wrong: " + err);
})
.then((results) => {
const res = results.reduce((missing, value) => {
if (value !== "OK") {
missing.push(value);
}
return missing;
}, []);
res.map((item) => {
gulp
.src(item[1])
.pipe(
imageResize({
width: item[2],
crop: false,
upscale: false,
})
)
.pipe(
rename((path) => {
path.basename += "_" + item[2].toString();
})
)
.pipe(gulp.dest(item[3]));
});
})
.catch((err) => {
console.log("someting went wrong: " + err);
});
});
gulp.task("img:add", () => {
runSequence("img:minimize", "img:generatesizes");
});