gulpfile.js

@@ -1,28 +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 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 html () {
+  return src(paths.html.all,).pipe(dest(paths.output));
+}
 
 
 function styles() {
-    return src('src/styles/main.scss').pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest('dist'));
+    return src(paths.styles.main).pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError)).pipe(dest(paths.output));
 
   };
 
 
-  function scripts () {
+  function server () {
-    return browserify('src/scripts/app.js').transform(Babelify.configure({presets: ['@babel/preset-env'],})).bundle().pipe(source('bundle.js')).pipe(buffer()).pipe(uglify()).pipe(dest('dist'));
+      connect.server({
+          root: paths.output,
+          livereload: true,
+          port: 3000,
+        })
     }
 
-
     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);
     }
 
+    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));
+    }
 
-  exports.sentinel = sentinel;
+  exports.default = parallel (server, sentinel);

package.json

@@ -5,7 +5,7 @@
   "main": "js.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "gulp sentinel"
+    "dev": "gulp"
   },
   "repository": {
     "type": "git",
@@ -19,6 +19,7 @@
     "babelify": "^10.0.0",
     "browserify": "^17.0.0",
     "gulp": "^4.0.2",
+    "gulp-connect": "^5.7.0",
     "gulp-sass": "^5.1.0",
     "gulp-uglify": "^3.0.2",
     "sass": "^1.56.1",

src/scripts/components/TouristAttractions.js

@@ -17,21 +17,28 @@ export class TouristAttractions {
 
         this.inputTitle = document.querySelector('.input-text__titulo');
         this.inputDescription = document.querySelector('.input-text__descricao');
+
     }
 
     events () {
-        this.inputFile.addEventListener('change', this.imgPreview.bind(this));
+        this.inputFile.addEventListener('change', this.imgPreview.bind(this), false);
         this.form.addEventListener('submit', this.addProperty.bind(this));
+
     }
 
+
          imgPreview (e) {
         const inputTarget = e.target;
         const file = inputTarget.files[0];
 
+
+
         if (file) {
 
             const reader = new FileReader();
 
+
+
             reader.addEventListener('load', (e) => {
                 const readerTarget = e.target;
 
@@ -39,13 +46,17 @@ export class TouristAttractions {
                 img.src = readerTarget.result;
                 img.classList.add('img-result');
 
+
+                this.labelInput.innerText = "";
+
+
                 this.labelInput.appendChild(img);
 
             });
 
+
             reader.readAsDataURL(file);
 
-            this.labelInput.innerText = "";
             this.labelInput.style.border = "none";
 
 
@@ -65,7 +76,7 @@ export class TouristAttractions {
         const spotDescription = e.target['input-description'].value
 
 
-        if (spotImg != '' && spotTitle != '' && spotDescription != '') {
+        if (this.spotImg != '' && spotTitle != '' && spotDescription != '') {
 
             const spot = {
                 image: spotImg.src,

src/templates/index.html

@@ -4,7 +4,7 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="stylesheet" href="../dist/main.css">
+    <link rel="stylesheet" href="main.css">
 
     <title>Tourist Attractions</title>
 </head>
@@ -55,7 +55,7 @@
 
     </main>
 
-    <script src="../dist/bundle.js"></script>
+    <script src="bundle.js"></script>
 
 </body>
 </html>