Невозможно использовать функцию lib, когда concat несколько libs в один

Я пытаюсь узнать gulp. У меня есть задача, которая объединяет все js lib в один lib.min.js

variable templates[template].src.libsJs - это массив со следующими значениями:

Где templates является переменной, которая описывает весь возможный шаблон сайта. Когда я буду excecute:

Я также устанавливаю parametr с именем шаблона, который хотел бы построить.

После этого я включаю этот js файл в свой html и пытаюсь использовать функцию совой карусели:

Этот код близко к нижней части тела. В консоли браузера я вижу следующее исключение:

Но если удалить из html concat js и добавить все сжатые js файлы, он будет работать нормально.

Это результат libs.min.js, который только конкатенирован и не был сокращен (без вызова uglify)

Может кто-нибудь знает, почему это происходит?

Ответы

Ответ 1

Я проверил ваш прикрепленный файл libs.min.js, и вам не хватает Tether для начальной загрузки 4. См. этот вопрос, чтобы решить эту проблему: Как исправить ошибку; 'Ошибка: подсказки Bootstrap требуют Tether. Я быстро попытался собрать ваш libs.min.js вместе с Tether из CDN и CSS owlCarousel в файле index.html, и он работает:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.2.1/assets/owl.carousel.min.css">
        <script src="https://npmcdn.com/[email protected]/dist/js/tether.min.js"></script>
        <script src="libs.min.js" type="text/javascript"></script>
    </head>
    <body>
        <div class="owl-carousel owl-theme">
            <div class="item"><h4>1</h4></div>
            <div class="item"><h4>2</h4></div>
            <div class="item"><h4>3</h4></div>
            <div class="item"><h4>4</h4></div>
            <div class="item"><h4>5</h4></div>
            <div class="item"><h4>6</h4></div>
            <div class="item"><h4>7</h4></div>
            <div class="item"><h4>8</h4></div>
            <div class="item"><h4>9</h4></div>
            <div class="item"><h4>10</h4></div>
            <div class="item"><h4>11</h4></div>
            <div class="item"><h4>12</h4></div>
        </div>
        <script>
            $('.owl-carousel').owlCarousel({
                loop:true,
                margin:10,
                nav:true,
                responsive:{
                    0:{
                        items:1
                    },
                    600:{
                        items:3
                    },
                    1000:{
                        items:5
                    }
                }
            });
        </script>
    </body>
</html>

Ответ 2

Не рекомендуется обычно запускать плагин uglify на уже минифицированных файлах. Я вижу, что большинство ваших файлов JavaScript уже были уменьшены.

Минимизация вообще может потенциально удалить открытые функциональные возможности.

Попробуйте удалить вызов uglify из цепочки и посмотреть, работает ли это.

Ответ 3

Я бы добавил проверку синтаксиса JS до и после concat() и на данный момент оставить uglify(). Это может помочь сузить проблему.

const jsValidate = require('gulp-jsvalidate');

gulp.task("lib-js:build", function () {
    return gulp.src(templates[template].src.libsJs)
       .pipe(jsValidate())
       .pipe(concat("libs.min.js"))
       .pipe(jsValidate())
       .pipe(gulp.dest(templates[template].dist.js));
});

Ответ 4

Возможно, в этих js файлах существует конфликт имен, есть два файла, у которых есть переменная с именем $, а последняя не является jQuery obj, а когда вы добавляете файлы отдельно, jQuery загружает последнюю точно. Вы можете выполнить поиск в этих файлах.