add gulp script

.gitignore

@@ -0,0 +1,9 @@
+/node_modules/
+
+*.jpg
+*.png
+*.env
+*.log
+
+/dst/
+

gulpfile.js

@@ -0,0 +1,56 @@
+import { readdir } from 'node:fs/promises'
+import { existsSync } from 'node:fs'
+
+import { src, dest, watch, series } from 'gulp'
+import fileinclude from 'gulp-file-include'
+import rename from 'gulp-rename'
+import concat from 'gulp-concat'
+import postcss from 'gulp-postcss'
+import combineMq from 'postcss-sort-media-queries'
+
+async function listDir(directoryPath) {
+    const entries = await readdir(directoryPath, { withFileTypes: true })
+    const subfolders = entries
+      .filter(entry => entry.isDirectory())
+      .map(entry => entry.name)
+
+    return subfolders  
+}
+
+const dir = import.meta.dirname
+const pages = await listDir('./src/pages')
+
+async function html() {   
+    console.log(`resync...`)
+    pages.forEach(page=>{
+        if(existsSync(`${dir}/src/pages/${page}/${page}.html`)){
+            console.log(`we find page ${page}!`)
+            return src([`./src/pages/${page}/${page}.html`])
+                .pipe(fileinclude({
+                    prefix: '@@',
+                    basepath: '@file',
+                    basename: page
+                }))
+                .pipe(rename(page+'.html'))
+                .pipe(dest('./dst/'))
+        }        
+    })
+}
+
+async function css() {
+     return src(['./src/pages/**/*.css', './src/components/**/*.css'])
+         .pipe(concat('styles.css'))
+         .pipe(postcss([combineMq]))
+         .pipe(dest('./dst/css/'))
+}
+
+async function watcher() {
+  await watch(
+    ['./src/pages/**/*.html', './src/components/**/*.html', '/src/pages/**/*.css', './src/components/**/*.css'],
+    series(html, css)
+  );
+}
+
+
+
+export default series(html, css, watcher)

package.json

@@ -0,0 +1,21 @@
+{
+  "name": "webdev-vacancy",
+  "version": "1.0.0",
+  "main": "index.js",
+  "repository": "git@git.atmt.me:yaroslav/webdev-vacancy.git",
+  "author": "yaroslav.hm@gmail.com",
+  "private": true,
+  "type": "module",
+  "devDependencies": {
+    "gulp": "^5.0.1",
+    "gulp-concat": "^2.6.1",
+    "gulp-file-include": "^2.3.0",
+    "gulp-postcss": "^10.0.0",
+    "gulp-rename": "^2.1.0",
+    "postcss": "^8.5.6",
+    "postcss-sort-media-queries": "^5.2.0"
+  },
+  "scripts": {
+    "dev": "yarn gulp"
+  }
+}

src/components/form/listbox/listbox.css

@@ -0,0 +1,4 @@
+.list-container{
+    display: flex;
+    flex-direction: column;
+}

src/components/form/listbox/listbox.html

@@ -0,0 +1,9 @@
+<div class="listbox">
+    <ul class="list-container">
+        <li>New York</li>
+        <li>Rome</li>
+        <li>London</li>
+        <li>Istanbul</li>
+        <li>Paris</li>
+    </ul>
+</div>