(feat): Cria rotas, server, browserify, babelefy, uglify

gulpfile.js

@@ -1,15 +1,57 @@
-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 uglify = require('gulp-uglify');
+const source = require('vinyl-source-stream');
+const buffer = require('vinyl-buffer');
+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: 3001,
 
-function styles() {
+    });
-    return src("src/styles/main.scss")
-        .pipe(sass({ outputStyle: 'compressed' }).on( 'error', sass.logError ))
-        .pipe(dest( 'dist' ) );
 }
 
 function sentinel() {
-    watch('src/styles/*.scss', { ignoreInitial: false }, styles);
+    watch(paths.html.all, { ignoreInitial: false }, html);
+    watch(paths.styles.all, { ignoreInitial: false }, styles);
+    watch(paths.scripts.all, { ignoreInitial: false }, scripts);
 }
 
-exports.sentinel = sentinel;
+function html() {
+    return src(paths.html.all).pipe(dest(paths.output));
+}
+
+function styles() {
+    return src(paths.styles.main)
+        .pipe(sass({ outputStyle: 'compressed' }).on( 'error', sass.logError ))
+        .pipe(dest( paths.output ) )
+        .pipe(connect.reload());
+}
+
+function scripts() {
+    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.default = parallel( server, sentinel) ;

package.json

@@ -5,13 +5,21 @@
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "gulp sentinel"
+    "dev": "gulp"
   },
   "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

@@ -1,70 +1,5 @@
-
+import { ShoppingList } from "./components/ShoppingList";
 
 document.addEventListener('DOMContentLoaded', function() {
-
+    new ShoppingList();
-    const list = [];
-
-    const form = document.querySelector(".shopping-form");
-    const itemInput = document.querySelector(".shopping-form-item-input");
-    const quantityInput = document.querySelector(".shopping-form-quantity-input");
-    const incrementButton = document.querySelector(".shopping-form-increment-button");
-    const decrementButton = document.querySelector(".shopping-form-decrement-button");
-    const items = document.querySelector(".shopping-items");
-
-    incrementButton.addEventListener("click", incrementQuantity);
-    decrementButton.addEventListener("click", decrementQuantity);
-    form.addEventListener("submit", addItemToList);
-
-    function incrementQuantity() {
-        const currentValue = Number(quantityInput.value);
-        const newValue = currentValue + 1;
-        quantityInput.value = newValue;
-    }
-
-    function decrementQuantity() {
-        const currentValue = Number(quantityInput.value);
-        const newValue = currentValue - 1;
-         if (newValue > 0) {
-             quantityInput.value = newValue;
-         }
-    }
-
-    function addItemToList(event){
-        event.preventDefault();
-
-        const itemName = event.target["item-name"].value;
-        const itemQuantity = event.target["item-quantity"].value;
-
-            if (itemName != "") {
-                const item = {
-                    name: itemName,
-                    quantity: itemQuantity,
-                };
-
-                list.push(item);
-                renderListItems();
-                resetInputs();
-            }            
-    }
-
-    function renderListItems() {
-        let itemsStructure = "";
-
-        list.forEach(function(item) {
-            itemsStructure += `
-                <li class="shopping-item">
-                <span>${item.name}</span>
-                <span>${item.quantity}</span>
-                </li>
-            `;
-        });
-
-        items.innerHTML = itemsStructure ;
-    }
-
-    function resetInputs(){
-        itemInput.value = "";
-        quantityInput.value = 1;
-    
-    }
 });

src/scripts/components/ShoppingList.js

@@ -0,0 +1,79 @@
+export class ShoppingList {
+    constructor(){
+        this.list = [];
+
+        this.selectors();
+        this.events();
+    }
+
+
+
+    selectors() {
+        this.form = document.querySelector(".shopping-form");
+        this.itemInput = document.querySelector(".shopping-form-item-input");
+        this.quantityInput = document.querySelector(".shopping-form-quantity-input");
+        this.incrementButton = document.querySelector(".shopping-form-increment-button");
+        this.decrementButton = document.querySelector(".shopping-form-decrement-button");
+        this.items = document.querySelector(".shopping-items");
+    }
+
+    events() {
+        this.incrementButton.addEventListener("click", this.incrementQuantity.bind(this));
+        this.decrementButton.addEventListener("click", this.decrementQuantity.bind(this));
+        this.form.addEventListener("submit", this.addItemToList.bind(this));
+
+    }
+
+    incrementQuantity() {
+        const currentValue = Number(this.quantityInput.value);
+        const newValue = currentValue + 1;
+        this.quantityInput.value = newValue;
+    }
+
+    decrementQuantity() {
+        const currentValue = Number(this.quantityInput.value);
+        const newValue = currentValue - 1;
+         if (newValue > 0) {
+            this.quantityInput.value = newValue;
+         }
+    }
+
+    addItemToList(event){
+        event.preventDefault();
+
+        const itemName = event.target["item-name"].value;
+        const itemQuantity = event.target["item-quantity"].value;
+
+            if (itemName != "") {
+                const item = {
+                    name: itemName,
+                    quantity: itemQuantity,
+                };
+
+                this.list.push(item);
+                this.renderListItems();
+                this.resetInputs();
+            }
+    }
+
+    renderListItems() {
+        let itemsStructure = "";
+
+        this.list.forEach(function(item) {
+            itemsStructure += `
+                <li class="shopping-item">
+                <span>${item.name}</span>
+                <span>${item.quantity}</span>
+                </li>
+            `;
+        });
+
+        this.items.innerHTML = itemsStructure ;
+    }
+
+    resetInputs(){
+        this.itemInput.value = "";
+        this.quantityInput.value = 1;
+
+    }
+}

src/templates/index.html

@@ -13,7 +13,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet" />
 
 
-    <link rel="stylesheet" href="../dist/main.css">
+    <link rel="stylesheet" href="./main.css">
 
 
 </head>
@@ -51,6 +51,6 @@
             </section>
         </main>
 
-        <script src="scripts/app.js"></script>
+        <script src="./bundle.js"></script>
     </body>
 </html>

styles/form.css

@@ -1,97 +0,0 @@
-
-.shopping-form {
-    margin-bottom: 32px;
-}
-
-.shopping-form-inputs {
-    display: flex;
-    align-items: flex-end;
-    margin-bottom: 24px;
-}
-
-.shopping-form-item-wrapper {
-    flex: 1;
-    max-width: 256px;
-}
-
-.shopping-form-label {
-    display: block;
-    margin-bottom: 4px;
-}
-
-.shopping-form-item-input,
-.shopping-form-quantity-input {
-    width: 100%;
-    height: 32px;
-    padding: 0 12px;
-    border: 1px solid var(--gray-300);
-    border-radius: 4px;
-    background: var(--white);  
-}
-
-
-.shopping-form-quantity-wrapper {
-    display: flex;
-    align-items: center;
-    margin-left: 24px;
-}
-
-.shopping-form-quantity-input {
-    max-width: 64px;
-    text-align: center;
-    margin:  0 4px;
-}
-
-.shopping-form-quantity-button {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    width: 32px;
-    height: 32px;
-    border: 0;
-    border-radius: 4px;
-    background: var(--gray-100) ;
-}
-
-.shopping-form-quantity-button:hover {
-    background: var(--orange-500);
-    transition: background-color 0.2s linear ;
-}
-
-.shopping-form-quantity-button:active {
-    background: var(--orange-300);
-}
-
-.shopping-form-quantity-button::before,
-.shopping-form-increment-button::after {
-    content: '';
-    position: absolute;
-    width: 16px;
-    height: 4px;
-    border-radius: 4px;
-    background: var(--white);
-}
-
-.shopping-form-increment-button::after {
-    transform: rotate(90deg);
-}
-
-.shopping-form-submit-button {
-    width: 100%;
-    max-width: 128px;
-    height: 32px;
-    border: 0;
-    border-radius: 4px;
-    color:  var(--white);
-    font-weight: 700;
-    background: var(--orange-500);
-    transition:  background-color .2s linear;
-}
-
-.shopping-form-submit-button:hover {
-    background: var(--orange-300);
-}
-
-.shopping-form-submit-button:active {
-    background: var(--orange-500);
-}

styles/global.css

@@ -1,17 +0,0 @@
-* {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-}
-
-body,
-input,
-button {
-    font-family: 'Roboto', sans-serif;
-    font-size: 16px;
-    color: var(--gray-500);
-}
-
-button {
-    cursor: pointer ;
-}

styles/items.css

@@ -1,22 +0,0 @@
-.shopping-result {
-    max-width: 416px;
-}
-
-.shopping-result-head,
-.shopping-item {
-    display: grid;
-    grid-template-columns: 3fr 1fr;
-    padding: 8px 16px;
-}
-
-.shopping-result-head {
-    background: var(--gray-100);
-}
-
-.shopping-items {
-    list-style: none;
-}
-
-.shopping-item:nth-child(even) {
-    background: var(--gray-100);
-}

styles/main.css

@@ -1,16 +0,0 @@
-@import "global.css";
-@import "variables.css";
-@import "form.css";
-@import "items.css";
-
-.shopping-container {
-    max-width: 1200px;
-    margin: 0 auto;
-    padding: 0 15px;
-}
-
-.shopping-title {
-    margin: 32px 0;
-    font-size: 32px;
-
-}

styles/variables.css

@@ -1,11 +0,0 @@
-:root {
-    --white: #ffffff;
-
-    --gray-100:#e5e5e5;
-    --gray-300:#bdbdbd;
-    --gray-500: #333333;
-
-    
-    --orange-300: #f6ad55;
-    --orange-500: #ed8936;
-}