feat: adicionando scripts e dependências

gulpfile.js

@@ -1,14 +1,65 @@
-const {src,dest,watch} = require("gulp");
+const { src, dest, watch, parallel } = require("gulp");
 const sass = require("gulp-sass")(require("sass"));
+const browserify = require("browserify");
+const babelify = require("babelify");
+const source = require("vinyl-source-stream");
+const buffer = require("vinyl-buffer");
+const uglify = require("gulp-uglify");
+const connect = require("gulp-connect");
+
+const paths = {
+    html: {
+        all: "src/templates/**/*.html",
+    },
+    styles: {
+        all: "src/styles/**/*.scss",
+        main: "src/styles/main.scss",
+    },
+    scripts: {
+        all: "src/scripts/**/*.js",
+        main: "src/scripts/app.js",
+    },
+    output: "dist",
+};
+
+function server() {
+    connect.server({
+        root: "dist",
+        livereload: true,
+        port: 3000,
+    });
+}
+
+function sentinel() {
+    watch(paths.html.all, { ignoreInitial: false }, html);
+    watch(paths.styles.all, { ignoreInitial: false }, styles);
+    watch(paths.scripts.all, { ignoreInitial: false }, scripts);
+}
+
+function html() {
+    return src(paths.html.all).pipe(dest(paths.output));
+}
 
 function styles() {
-    return src("src/styles/main.scss")
+    return src(paths.styles.main)
-    .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
+        .pipe(sass({ outputStyle: "compressed" }).on("error", sass.logError))
-    .pipe(dest("dist"));
+        .pipe(dest(paths.output))
+        .pipe(connect.reload());
 }
 
-function sentinel(){
+function scripts() {
-    watch("src/styles/**/*.scss", { ignoreInitial: false }, styles);
+    return browserify(paths.scripts.main)
+        .transform(
+            babelify.configure({
+                presets: ["@babel/preset-env"],
+            })
+        )
+        .bundle()
+        .pipe(source("bundle.js"))
+        .pipe(buffer())
+        .pipe(uglify())
+        .pipe(dest(paths.output))
+        .pipe(connect.reload());
 }
 
-exports.sentinel = sentinel;
+exports.default = parallel(server, sentinel);

package.json

@@ -5,7 +5,7 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "gulp sentinel"
+    "dev": "gulp"
   },
   "repository": {
     "type": "git",
@@ -14,8 +14,16 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@babel/core": "^7.20.2",
+    "@babel/preset-env": "^7.20.2",
+    "babelify": "^10.0.0",
+    "browserify": "^17.0.0",
     "gulp": "^4.0.2",
+    "gulp-connect": "^5.7.0",
     "gulp-sass": "^5.1.0",
-    "sass": "^1.56.1"
+    "gulp-uglify": "^3.0.2",
+    "sass": "^1.56.1",
+    "vinyl-buffer": "^1.0.1",
+    "vinyl-source-stream": "^2.0.0"
   }
 }

src/scripts/app.js

@@ -0,0 +1,5 @@
+import {Form} from "./components/form";
+
+document.addEventListener("DOMContentLoaded",function(){
+    new Form();
+});

src/scripts/components/form.js

@@ -0,0 +1,7 @@
+export class Form {
+    constructor() {}
+
+    selectors() {}
+
+    events() {}
+}

src/styles/partials/form.scss

@@ -1,17 +1,37 @@
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
 
-.form-inputs {
+input,
-    display: flex;
+textarea {
-    .form-input-descricao {
+    border-radius: 8px;
+}
+
+.form-container {
+    max-width: 780px;
+    .form-inputs {
         display: flex;
-        flex-direction: column;
+        width: 100%;
-        .input-titulo {
+        .input-image-container {
-            width: 79%;
+            .input-image-content {
-            height: 56px;
+                width: 32%;
+                height: 212px;
+                border: 2px solid $input-image-border-color;
+            }
         }
-        .input-descricao,
+        .form-input-descricao {
-        .input-titulo {
+            display: flex;
-            padding: 10px 16px;
+            flex-direction: column;
+            .input-titulo {
+                width: 79%;
+                height: 56px;
+            }
+            .input-descricao {
+                width: 417px;
+                height: 136px;
+            }
+            .input-descricao,
+            .input-titulo {
+                padding: 10px 16px;
+            }
         }
     }
 }
@@ -27,3 +47,6 @@ input,
     letter-spacing: 0.15px;
     font-family: "Roboto", sans-serif;
 }
+
+// width: 328px;
+// height: 56px;

src/templates/index.html

@@ -6,11 +6,11 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
 
     <title>Challenge Tourist Attractions</title>
-    
+
     <link rel="preconnect" href="https://fonts.googleapis.com"/>
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
     <link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"/>
-    <link rel="stylesheet" href="../dist/main.css"/>
+    <link rel="stylesheet" href="main.css"/>
 </head>
 <body>
 
@@ -34,6 +34,6 @@
             </form>
         </section>
     </main>
-
+    <script src="bundle.js"></script>
 </body>
 </html>