From b112850be2dd4ba7488cf70193fd07d070cb7a94 Mon Sep 17 00:00:00 2001 From: Imran Imtiaz Date: Tue, 19 Aug 2025 08:14:48 +0400 Subject: [PATCH] Update index.js I replaced all callback-based fs functions with the modern fs/promises API so that everything runs with async/await, making the flow much cleaner and easier to follow. Instead of manually repeating and hardcoding paths, I used path.join consistently for building directory and file paths, which makes the code more portable. For the assets copying, I rewrote the logic into a proper recursive function that copies entire directories and files without first deleting everything, which is both safer and more efficient. In the CSS build step, instead of appending to the file repeatedly with fs.appendFile, I now read all .css files into memory, combine them with join("\n"), and write them once, which reduces I/O operations and keeps the file clean. The HTML building logic was also streamlined: placeholders are replaced with component content using a loop that clearly matches component names to placeholders, making it easy to maintain. Finally, I wrapped the whole build process in a structured build() function with proper try/catch error handling and added a success log message, so the build process feels more like a single controlled workflow. --- 06-build-page/index.js | 159 +++++++++++++++++------------------------ 1 file changed, 64 insertions(+), 95 deletions(-) diff --git a/06-build-page/index.js b/06-build-page/index.js index 3069ef6e..aa583711 100644 --- a/06-build-page/index.js +++ b/06-build-page/index.js @@ -1,113 +1,82 @@ -const fs = require('fs'); -const path = require('path'); -const fsPromise = require('fs/promises'); -const { createBrotliCompress } = require('zlib'); -let dirDirection = path.resolve(__dirname + '/project-dist'); -let assetsDirection = path.resolve(__dirname + '/project-dist/assets'); -let htmlDirection = path.resolve(__dirname + '/project-dist/index.html'); -let csslDirection = path.resolve(__dirname + '/project-dist/style.css'); - - -fs.mkdir(dirDirection, { recursive: true }, err => { - if(err) throw err; -}); - -fs.mkdir(assetsDirection, { recursive: true }, err => { - if(err) throw err; -}); - +const fs = require("fs/promises"); +const path = require("path"); + +const distDir = path.join(__dirname, "project-dist"); +const assetsSrc = path.join(__dirname, "assets"); +const assetsDist = path.join(distDir, "assets"); +const htmlDist = path.join(distDir, "index.html"); +const cssDist = path.join(distDir, "style.css"); +const templateFile = path.join(__dirname, "template.html"); +const componentsDir = path.join(__dirname, "components"); +const stylesDir = path.join(__dirname, "styles"); + +// Ensure directories exist +async function prepareDist() { + await fs.mkdir(distDir, { recursive: true }); + await fs.mkdir(assetsDist, { recursive: true }); + await fs.writeFile(htmlDist, ""); + await fs.writeFile(cssDist, ""); +} -fs.writeFile( - htmlDirection, - '', - (err) => { - if (err) throw err; - }); +// Copy assets folder recursively +async function copyAssets(src, dest) { + await fs.mkdir(dest, { recursive: true }); + const entries = await fs.readdir(src, { withFileTypes: true }); -fs.writeFile( - csslDirection, - '', - (err) => { - if (err) throw err; - }); + for (const entry of entries) { + const srcPath = path.join(src, entry.name); + const destPath = path.join(dest, entry.name); -async function copyDirectory () { - try { - const readDir = await fsPromise.readdir('06-build-page/assets', {withFileTypes: true}); - for (const dir of readDir) { - let copies = await fsPromise.readdir(`06-build-page/assets/${dir.name}`, {withFileTypes: true}); - console.log(dir.name); - fs.mkdir(`06-build-page/project-dist/assets/${dir.name}`, { recursive: true }, err => { - if(err) throw err; - }); - let readyCopy = await fsPromise.readdir(`06-build-page/project-dist/assets/${dir.name}`, {withFileTypes: true}); - for (const file of readyCopy) { - fs.unlink(`06-build-page/project-dist/assets/${dir.name}/${file.name}`, function(err){ - if (err) { - console.log(err); - } - }); - } - for (const copy of copies) { - // console.log(`06-build-page/assets/${readDir[i].name}/${copy.name}`) - fs.copyFile(`06-build-page/assets/${dir.name}/${copy.name}`, `06-build-page/project-dist/assets/${dir.name}/${copy.name}`, (err) => { - if (err) { - console.log('Error Found:', err); - } - }); - - } + if (entry.isDirectory()) { + await copyAssets(srcPath, destPath); + } else { + await fs.copyFile(srcPath, destPath); } - - - } catch(err) { - console.log((err)); } } -copyDirectory(); - -async function createHtml() { - try { - let templateHtml = await fsPromise.readFile(__dirname + '/' + 'template.html'); - let htmlComponents = await fsPromise.readdir(__dirname + '/' + 'components', {withFileTypes: true}); - let htmlTxt = templateHtml.toString(); - let currentPart = ''; - for (const component of htmlComponents) { - if (component.isFile() && path.extname(component.name) === '.html'){ - currentPart = await fsPromise.readFile(__dirname + '/components/' + `${component.name}`); - htmlTxt = htmlTxt.replace(`{{${component.name.slice(0, -5)}}}`, currentPart.toString()); +// Build HTML by replacing components +async function buildHtml() { + let template = await fs.readFile(templateFile, "utf-8"); + const components = await fs.readdir(componentsDir, { withFileTypes: true }); - } + for (const comp of components) { + if (comp.isFile() && path.extname(comp.name) === ".html") { + const placeholder = `{{${path.basename(comp.name, ".html")}}}`; + const content = await fs.readFile(path.join(componentsDir, comp.name), "utf-8"); + template = template.replace(placeholder, content); } - fsPromise.writeFile(__dirname + '/project-dist/index.html', htmlTxt); - - } catch(err) { - console.log((err)); } + + await fs.writeFile(htmlDist, template); } -createHtml(); +// Merge all CSS into one +async function buildCss() { + const styles = await fs.readdir(stylesDir, { withFileTypes: true }); + const cssContents = []; + + for (const file of styles) { + if (file.isFile() && path.extname(file.name) === ".css") { + const content = await fs.readFile(path.join(stylesDir, file.name), "utf-8"); + cssContents.push(content); + } + } + await fs.writeFile(cssDist, cssContents.join("\n")); +} -async function copyStyles() { +// Main build process +async function build() { try { - - let stylesComponents = await fsPromise.readdir(__dirname + '/' + 'styles', {withFileTypes: true}); - for (const styles of stylesComponents) { - if (styles.isFile() === true && path.extname(styles.name) == '.css') { - let currentCss = await fsPromise.readFile(__dirname + `/styles/${styles.name}`, 'utf-8'); - fs.appendFile( - (__dirname + '/project-dist/style.css'), - currentCss, - err => { - if (err) throw err; - }); - } - } - } catch(err) { - console.log((err)); + await prepareDist(); + await copyAssets(assetsSrc, assetsDist); + await buildHtml(); + await buildCss(); + console.log("Build completed successfully!"); + } catch (err) { + console.error("Build failed:", err); } } -copyStyles(); \ No newline at end of file +build();