feat: Adiciona a automação do projeto

gulpfile.js

@@ -1,15 +1,68 @@
-const {src, dest, watch} = require('gulp');
-const sass = require('gulp-sass')(require('sass'));
+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 uglify = require("gulp-uglify");
+const buffer = require("vinyl-buffer");
+const connect = require("gulp-connect");
 
-function styles() {
-    return src("src/styles/main.scss")
-    .pipe(sass({outputStyle: "compressed" }).on('error', sass.logError))
-    .pipe(dest('dist'));
+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('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,24 @@
     "main": "index.js",
     "scripts": {
         "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "gulp sentinel"
+        "dev": "gulp"
     },
-  "author": "",
+    "author": "Filipe Quintanilha Evangelista",
     "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-source-stream": "^2.0.0"
+    },
+    "dependencies": {
+        "buffer": "^6.0.3",
+        "vinyl-buffer": "^1.0.1"
     }
 }

src/scripts/app.js

@@ -1,71 +1,5 @@
-document.addEventListener('DOMContentLoaded', function(){
-    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;
-    }
-
+import { ShoppingList } from "./components/ShoppingList";
 
+document.addEventListener("DOMContentLoaded", function () {
+    new ShoppingList();
 });

src/scripts/components/ShoppingList.js

@@ -0,0 +1,90 @@
+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

@@ -12,7 +12,7 @@
         <title>Shopping List</title>
 
         <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>
 
@@ -49,6 +49,6 @@
             </section>
         </main>
 
-        <script src="scripts/app.js"></script>
+        <script src="bundle.js"></script>
     </body>
 </html>