-
Notifications
You must be signed in to change notification settings - Fork 0
/
gulpfile.js
58 lines (49 loc) · 1.64 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
const gulp = require("gulp");
const postcss = require("gulp-postcss");
const playwright = require("playwright");
const postcssPlugins = [require("tailwindcss"), require("autoprefixer")];
const _ = {
src: `./src`,
dest: `./assets`,
browserTesting: {
url: `http://localhost:8080`,
screenshotDir: `testing`,
browsers: ["chromium", "firefox", "webkit"],
devices: ["iPad Mini", "iPhone 6", "iPhone SE"]
}
};
const compileCSS = function() {
return gulp
.src(`${_.src}/css/style.css`)
.pipe(postcss(postcssPlugins))
.pipe(gulp.dest(`${_.dest}/css`));
};
const watch = function(done) {
gulp.watch(`${_.src}/css`, compileCSS);
gulp.watch(`./tailwind.config.js`, compileCSS);
done();
};
const browserTest = function(done) {
let { browsers, devices, screenshotDir, url } = _.browserTesting;
// Create a screenshot for each browser
browsers.forEach(async browser => {
devices.forEach(async device => {
const currentDevice = playwright.devices[device];
const instance = await playwright[browser].launch();
const context = await instance.newContext({
viewport: currentDevice.viewport,
userAgent: currentDevice.userAgent
});
const page = await context.newPage(url);
await page.screenshot({
path: `./${screenshotDir}/${browser}-${device}.png`
});
await page.close();
});
});
done();
};
exports.default = compileCSS;
exports.compileCSS = compileCSS;
exports.browserTest = browserTest;
exports.watch = gulp.parallel(watch);