feat: Adiciona arquivo html na past dist e cria um servidor pra rodar a aplicação

gulpfile.js

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

package.json

@@ -1,28 +1,29 @@
 {
-  "name": "practice-time-shopping-list-saulo-klein-nery",
+    "name": "practice-time-shopping-list-saulo-klein-nery",
-  "version": "1.0.0",
+    "version": "1.0.0",
-  "description": "To make it easy for you to get started with GitLab, here's a list of recommended next steps.",
+    "description": "To make it easy for you to get started with GitLab, here's a list of recommended next steps.",
-  "main": "index.js",
+    "main": "index.js",
-  "scripts": {
+    "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
+        "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "gulp sentinel"
+        "dev": "gulp"
-  },
+    },
-  "repository": {
+    "repository": {
-    "type": "git",
+        "type": "git",
-    "url": "ssh://git@gitea.ecommercetools.com.br:22022/SauloKleinNery/practice-time-shopping-list-saulo-klein-nery.git"
+        "url": "ssh://git@gitea.ecommercetools.com.br:22022/SauloKleinNery/practice-time-shopping-list-saulo-klein-nery.git"
-  },
+    },
-  "author": "",
+    "author": "",
-  "license": "ISC",
+    "license": "ISC",
-  "devDependencies": {
+    "devDependencies": {
-    "@babel/core": "^7.20.2",
+        "@babel/core": "^7.20.2",
-    "@babel/preset-env": "^7.20.2",
+        "@babel/preset-env": "^7.20.2",
-    "babelify": "^10.0.0",
+        "babelify": "^10.0.0",
-    "browserify": "^17.0.0",
+        "browserify": "^17.0.0",
-    "gulp": "^4.0.2",
+        "gulp": "^4.0.2",
-    "gulp-sass": "^5.1.0",
+        "gulp-connect": "^5.7.0",
-    "gulp-uglify": "^3.0.2",
+        "gulp-sass": "^5.1.0",
-    "sass": "^1.56.1",
+        "gulp-uglify": "^3.0.2",
-    "vinyl-buffer": "^1.0.1",
+        "sass": "^1.56.1",
-    "vinyl-source-stream": "^2.0.0"
+        "vinyl-buffer": "^1.0.1",
-  }
+        "vinyl-source-stream": "^2.0.0"
+    }
 }

src/templates/index.html

@@ -15,7 +15,7 @@
             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>
 
     <body>
@@ -70,6 +70,6 @@
             </section>
         </main>
 
-        <script src="../../dist/bundle.js"></script>
+        <script src="./bundle.js"></script>
     </body>
 </html>