Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix image download error handling in "gulpfile.js" and "downloadSingleImage.js" from issue #1283 #1284

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix image download error handling in "gulpfile.js" and "downloadSingleImage.js" from issue #1283 #1284

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
292 changes: 164 additions & 128 deletions gulpfile.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,193 +1,223 @@
const del = require('del');
const gulp = require('gulp');
const cachebust = require('gulp-rev');
const cacheClean = require('gulp-rev-delete-original');
const babel = require('gulp-babel');
const uglify = require('gulp-uglify-es').default;
const pug = require('gulp-pug');
const htmlmin = require('gulp-htmlmin');
const stylus = require('gulp-stylus');
const webserver = require('gulp-webserver');
const concat = require('gulp-concat');
const responsive = require('gulp-responsive');
const merge = require('merge-stream');
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const {readFile} = require('fs').promises;

const {swagList, swagImages} = require('./scripts/get-data');
const downloadImages = require('./scripts/download-images');

const PRODUCTION = process.env.NODE_ENV === 'production';

const REV_PATH = './dist/rev-manifest.json';
const del = require("del");
const gulp = require("gulp");
const cachebust = require("gulp-rev");
const cacheClean = require("gulp-rev-delete-original");
const babel = require("gulp-babel");
const uglify = require("gulp-uglify-es").default;
const pug = require("gulp-pug");
const htmlmin = require("gulp-htmlmin");
const stylus = require("gulp-stylus");
const webserver = require("gulp-webserver");
const concat = require("gulp-concat");
const responsive = require("gulp-responsive");
const merge = require("merge-stream");
const postcss = require("gulp-postcss");
const autoprefixer = require("autoprefixer");
const { readFile } = require("fs").promises;

const { swagList, swagImages } = require("./scripts/get-data");
const downloadImages = require("./scripts/download-images");

const PRODUCTION = process.env.NODE_ENV === "production";

const REV_PATH = "./dist/rev-manifest.json";
const RESIZE_OPTS = {
quality: 90,
progressive: true,
compressionLevel: 9,
errorOnEnlargement: false,
errorOnUnusedConfig: false
errorOnUnusedConfig: false,
};

let manifest = {
'css/index.css': 'css/index.css',
'js/index.js': 'js/index.js'
"css/index.css": "css/index.css",
"js/index.js": "js/index.js",
};

const assetsToBeInlined = ['css/index.css'];
const assetsToBeInlined = ["css/index.css"];

async function getInlinedAssets(config, manifest) {
const fileMap = new Map();
const promises = [];
const assetBasePath = 'dist/assets/';
const assetBasePath = "dist/assets/";

config.forEach(name => {
config.forEach((name) => {
const assetPath = assetBasePath + manifest[name];
promises.push(readFile(assetPath, 'utf8')
.then(contents => fileMap.set(name, contents)));
promises.push(
readFile(assetPath, "utf8").then((contents) =>
fileMap.set(name, contents)
)
);
});

await Promise.all(promises);
return fileMap;
}

gulp.task('pug', async done => {
const tags = Array.from(swagList.reduce(
(tagList, {tags}) => {
tags.filter(tag => tag !== 'expired').forEach(tag => tagList.add(tag));
gulp.task("pug", async (done) => {
const tags = Array.from(
swagList.reduce((tagList, { tags }) => {
tags
.filter((tag) => tag !== "expired")
.forEach((tag) => tagList.add(tag));
return tagList;
},
new Set()
)).sort();
}, new Set())
).sort();

if (PRODUCTION) {
delete require.cache[require.resolve(REV_PATH)];
manifest = require(REV_PATH);
}

const bustedAssets = {
css: `/assets/${manifest['css/index.css']}`,
js: `/assets/${manifest['js/index.js']}`
css: `/assets/${manifest["css/index.css"]}`,
js: `/assets/${manifest["js/index.js"]}`,
};

const inlinedAssets = await getInlinedAssets(assetsToBeInlined, manifest);

gulp.src('src/pug/*.pug')
.pipe(pug({
pretty: true,
locals: {swagList, tags, bustedAssets, inlinedAssets}
}))
.pipe(htmlmin({
collapseWhitespace: true,
removeComments: true
}))
.pipe(gulp.dest('dist/'))
.on('end', () => done());
gulp
.src("src/pug/*.pug")
.pipe(
pug({
pretty: true,
locals: { swagList, tags, bustedAssets, inlinedAssets },
})
)
.pipe(
htmlmin({
collapseWhitespace: true,
removeComments: true,
})
)
.pipe(gulp.dest("dist/"))
.on("end", () => done());
});

gulp.task('styl', () => {
return gulp.src('src/styl/index.styl')
.pipe(stylus({compress: true}))
.pipe(postcss([
autoprefixer()
]))
.pipe(gulp.dest('dist/assets/css'));
gulp.task("styl", () => {
return gulp
.src("src/styl/index.styl")
.pipe(stylus({ compress: true }))
.pipe(postcss([autoprefixer()]))
.pipe(gulp.dest("dist/assets/css"));
});

gulp.task('binaries', () => {
gulp.task("binaries", () => {
const paths = {
'src/img/*': 'dist/assets/img',
'src/fonts/*': 'dist/assets/fonts'
"src/img/*": "dist/assets/img",
"src/fonts/*": "dist/assets/fonts",
};

return merge(Object.entries(paths).map(([from, to]) =>
gulp.src(from).pipe(gulp.dest(to))
));
return merge(
Object.entries(paths).map(([from, to]) =>
gulp.src(from).pipe(gulp.dest(to))
)
);
});

gulp.task('js', () => {
const presets = [
['@babel/env', {targets: {browsers: ['> 75%']}}]
];
return gulp.src('src/js/*.js')
.pipe(concat('index.js'))
.pipe(babel({presets}))
gulp.task("js", () => {
const presets = [["@babel/env", { targets: { browsers: ["> 75%"] } }]];
return gulp
.src("src/js/*.js")
.pipe(concat("index.js"))
.pipe(babel({ presets }))
.pipe(uglify())
.pipe(gulp.dest('dist/assets/js'));
.pipe(gulp.dest("dist/assets/js"));
});

gulp.task('swag-img:clean', () => {
return del('dist/assets/swag-img/*');
gulp.task("swag-img:clean", () => {
return del("dist/assets/swag-img/*");
});

gulp.task('swag-img:download', async () => {
const success = await downloadImages(swagImages, 'dist/assets/swag-img');
if (!success) {
throw new Error('Failed to download images');
gulp.task("swag-img:download", async () => {
try {
const success = await downloadImages(swagImages, "dist/assets/swag-img");
if (!success) {
console.warn(
"Some images failed to download, but continuing with the build process."
);
}
} catch (error) {
console.error("An error occurred during image downloading:", error.message);
}
});

gulp.task('swag-img:optimize', cb => {
gulp.task("swag-img:optimize", (cb) => {
const jpegOutputConfig = {
name: '*.jpeg',
name: "*.jpeg",
height: 300,
flatten: true
flatten: true,
};
const webpOutputConfig = Object.assign({
rename: i => `${i.basename}.webp`
}, jpegOutputConfig);
const webpOutputConfig = Object.assign(
{
rename: (i) => `${i.basename}.webp`,
},
jpegOutputConfig
);

return gulp.src('dist/assets/swag-img/*')
return gulp
.src("dist/assets/swag-img/*")
.pipe(responsive([jpegOutputConfig, webpOutputConfig], RESIZE_OPTS))
.pipe(gulp.dest('dist/assets/swag-img'))
.on('end', () => {
swagList.forEach(swag => {
const baseName = swag.image.split('.').slice(0, -1).join('.');
.pipe(gulp.dest("dist/assets/swag-img"))
.on("end", () => {
swagList.forEach((swag) => {
const baseName = swag.image.split(".").slice(0, -1).join(".");
swag.images = {
jpeg: swag.image,
webp: `${baseName}.webp`
webp: `${baseName}.webp`,
};
});
cb();
});
});

gulp.task('swag-img', gulp.series('swag-img:clean', 'swag-img:download', 'swag-img:optimize'));

gulp.task('clean:styl', () => del('dist/assets/css/*'));
gulp.task('clean:js', () => del('dist/assets/js/*'));
gulp.task('clean:binaries', () => del(['dist/assets/img/*', 'dist/assets/fonts/*']));
gulp.task('clean:assets', gulp.parallel('clean:styl', 'clean:js', 'clean:binaries'));
gulp.task('clean:pug', () => del('dist/index.html'));
gulp.task('clean', gulp.parallel('clean:pug', 'clean:assets'));

gulp.task('cachebust', cb => {
gulp.task(
"swag-img",
gulp.series("swag-img:clean", "swag-img:download", "swag-img:optimize")
);

gulp.task("clean:styl", () => del("dist/assets/css/*"));
gulp.task("clean:js", () => del("dist/assets/js/*"));
gulp.task("clean:binaries", () =>
del(["dist/assets/img/*", "dist/assets/fonts/*"])
);
gulp.task(
"clean:assets",
gulp.parallel("clean:styl", "clean:js", "clean:binaries")
);
gulp.task("clean:pug", () => del("dist/index.html"));
gulp.task("clean", gulp.parallel("clean:pug", "clean:assets"));

gulp.task("cachebust", (cb) => {
if (!PRODUCTION) {
return cb();
}

const basePath = 'dist/assets';
const basePath = "dist/assets";
const bustedFiles = [
'dist/assets/css/*',
'dist/assets/js/*',
'dist/assets/swag-img/*'
"dist/assets/css/*",
"dist/assets/js/*",
"dist/assets/swag-img/*",
];

return gulp.src(bustedFiles, {base: basePath})
return gulp
.src(bustedFiles, { base: basePath })
.pipe(cachebust())
.pipe(cacheClean())
.pipe(gulp.dest(basePath))
.pipe(cachebust.manifest({
path: REV_PATH,
base: basePath
}))
.pipe(
cachebust.manifest({
path: REV_PATH,
base: basePath,
})
)
.pipe(gulp.dest(basePath))
.on('end', () => {
.on("end", () => {
delete require.cache[require.resolve(REV_PATH)];
manifest = require(REV_PATH);
swagList.forEach(swag => {
swagList.forEach((swag) => {
Object.entries(swag.images).forEach(([extension, fileName]) => {
fileName = `swag-img/${fileName.split('/').pop()}`;
fileName = `swag-img/${fileName.split("/").pop()}`;
if (!manifest[fileName]) {
console.warn(`Unable to find image ${fileName} in the manifest`);
return;
Expand All @@ -201,27 +231,33 @@ gulp.task('cachebust', cb => {
});
});

gulp.task('webserver', () => {
return gulp.src('dist')
.pipe(webserver({
gulp.task("webserver", () => {
return gulp.src("dist").pipe(
webserver({
livereload: true,
open: true,
host: process.env.GULP_LISTEN_HOST || '127.0.0.1',
port: Number.parseInt(process.env.GULP_LISTEN_PORT || '8080', 10)
}));
host: process.env.GULP_LISTEN_HOST || "127.0.0.1",
port: Number.parseInt(process.env.GULP_LISTEN_PORT || "8080", 10),
})
);
});

gulp.task('watch', () => {
gulp.watch('src/pug/**/*.pug', gulp.series('pug'));
gulp.watch('src/styl/**/*.styl', gulp.series('styl'));
gulp.watch('src/js/*.js', gulp.series('js'));
gulp.task("watch", () => {
gulp.watch("src/pug/**/*.pug", gulp.series("pug"));
gulp.watch("src/styl/**/*.styl", gulp.series("styl"));
gulp.watch("src/js/*.js", gulp.series("js"));
});

gulp.task('build', gulp.series(
'clean',
gulp.parallel(
gulp.series('swag-img', 'styl', 'cachebust', 'pug'), 'js', 'binaries'
gulp.task(
"build",
gulp.series(
"clean",
gulp.parallel(
gulp.series("swag-img", "styl", "cachebust", "pug"),
"js",
"binaries"
)
)
));
);

gulp.task('default', gulp.series('build', 'webserver', 'watch'));
gulp.task("default", gulp.series("build", "webserver", "watch"));
Loading