Выпуск комплектации javascript с gulp js

Question

Я связываю свои файлы javascript с помощью программы выполнения задач gulp js, во время разработки приложения я заметил одну проблему.

Когда я добавляю новую функцию (открыть пароль), скрипт отказывается работать из-за модального скрипта формы, который можно увидеть ниже.

'use strict';

var modal__button = document.getElementById("enquiry-form-trigger");
var close__button = document.getElementById("close");

modal__button.addEventListener("click", function (){
    var modal = document.getElementById("modal-form");
    modal.classList.add("fadeIn");
    modal.style.visibility = "visible";
});

close__button.addEventListener("click", function (){
    var modal = document.getElementById("modal-form");
    modal.classList.remove("fadeIn");
    modal.style.visibility = "hidden";
});

 When the above script and this other script below

"use strict"

document.getElementById("password-reveal-modal").addEventListener("click", function (){
    var x = document.getElementById("password-modal");
    if (x.type === "password") {
        x.type = "text";
    } else {
        x.type = "password";
    }
});

Функция раскрытия пароля не работает, но когда я вставляю ее в инструменты разработчика Chrome, она отлично работает.

Я не уверен, почему это не будет работать без вставки его в инструменты разработки, это сбивает меня с толку, я не уверен, является ли это моей установкой или это пользовательский javascript.

Это мои настройки файла gulp, на случай, если кто-нибудь захочет его проверить, я не вижу проблем, но я использую gulp только около 3 или 4 месяцев.

var gulp = require("gulp"),
  sass = require("gulp-sass"),
  image = require("gulp-image"),
  concat = require("gulp-concat"),
  browserSync = require('browser-sync').create(),
  reload = browserSync.reload,
  minifyEjs = require("gulp-minify-ejs"),
  stripEJSComments = require('gulp-strip-comments'),
  nodemon = require('gulp-nodemon'),
  plumber = require("gulp-plumber"),
  ejs = require("ejs"),
  uglify = require("gulp-uglify");


//Build task 
gulp.task("build", ["ejs", "styles", "images", "javascript", "routes", "models", "middleware"], function () {
  console.log("Build Success");
});

//start up sequence tasks
gulp.task('init', ["nodemon"], function () {
  browserSync.init({
    proxy: 'http://localhost:2000', //Index.js port number
    port: 2128, // The port browser sync runs on 
    serveStatic: [ './public/', "./assets/"], // What files browser sync should have access to 
    reloadOnRestart: true, // Enable auto reload  
    ghostMode:false, //Stops session mirroring 
    open: "external", //Opens up on an external address (xxx.xxx.x.xx:3128)
  });
});

//Starts the express server
gulp.task('nodemon', function (done) {
  var running = false; //Default State

  return nodemon({
    script: 'index.js', //Index file for the JS project
    watch: ["./assets/", "./public/"] //What nodemon has access to
  })

    .on('start', function () {
      if (!running) {
        done();
      }
      running = true;
    })

    //Minor Delay Of 500ms Upon Restart
    .on('restart', function () {
      setTimeout(function () {
        reload();
      }, 500);
    });
});

//SCSS Task
gulp.task("styles", function () {

  gulp.src("./assets/stylesheet/APP.scss")

  .pipe(plumber())

  .pipe(sass({
    outputStyle: 'compressed'
  }))


  .pipe(gulp.dest("./public/stylesheet/"))

  .pipe(browserSync.stream({ stream: true }));
});

//Compiles the express route/s
gulp.task("routes", function () {

   gulp.src([
        "./assets/routes/*.js"
    ])

    .pipe(plumber())

    .pipe(gulp.dest("./public/routes/"))

    .pipe(browserSync.stream({ stream: true }));
});


//Compiles the express route/s
gulp.task("models", function () {
  gulp.src("./assets/models/*.js")
  .pipe(plumber())
  .pipe(gulp.dest("./public/models/"))
  .pipe(browserSync.stream({ stream: true }));
});


//Image minification
gulp.task("images", function () {
  return gulp.src("./assets/images/*")
    .pipe(image())
    .pipe(gulp.dest("./public/images"))
    .pipe(browserSync.stream({ stream: true }));
});

//Client javascript
gulp.task("javascript", function () {
  gulp.src([
    "./node_modules/jquery/dist/jquery.js",
    "./node_modules/tether/dist/js/tether.js",
    "./node_modules/bootstrap/dist/js/bootstrap.js",
    "./assets/scripts/**/**/*.js"
  ])
  .pipe(plumber())
  .pipe(concat("main.js"))
  .pipe(gulp.dest("./public/scripts/"))
  .pipe(browserSync.stream({ stream: true }));
});

//Middleware task
gulp.task("middleware", function () {
    gulp.src("./assets/middleware/*.js")
    .pipe(plumber())  
    .pipe(concat("index.js"))
    .pipe(gulp.dest("./public/middleware/"))
    .pipe(browserSync.stream({ stream: true }));
});

//EJS task
gulp.task("ejs", function () {
    gulp.src("./assets/views/**/*.ejs")
    .pipe(plumber())  
    .pipe(stripEJSComments())
    .pipe(minifyEjs({}))
    .pipe(gulp.dest("./public/views"))
    .pipe(browserSync.stream({ stream: true }));
});


//Default task array
gulp.task("default", ["init", "build"], function (done) {
  gulp.watch("./assets/stylesheet/**/*.scss", ["styles"]);
  gulp.watch("./assets/scripts/*", ["javascript"]);
  gulp.watch("./assets/routes/*.js", ["routes"]);
  gulp.watch("./assets/models/*.js",["models"]);
  gulp.watch("./assets/images/*",["images"]);
  gulp.watch("./assets/views/**/*.ejs",["ejs"]);
  browserSync.reload();
  done();
});

Два файла, которые вызывают проблему, являются единственными файлами, так как я тестировал каждый файл и только эти два файла странно, поэтому что-то вызывает его конфликт.

Если вы хотите, чтобы я загрузил свой проект на github, просто дайте мне знать, и я загрузлю последнюю версию в мою ветку обновлений.

Я исчерпал все свои знания в этой проблеме, и теперь я полностью застрял.

Если бы кто-нибудь мог помочь коллеге-разработчику, это было бы очень признательно.

ура

Alex

Answer 1

Мне нужно было убедиться, что DOM полностью загружен, прежде чем скрипт сможет быть выполнен.