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

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

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

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

var templates = {
    balmy: {
        dist: {
            default: "templates/balmy/dist",
            html: "templates/balmy/dist/",
            js: "templates/balmy/dist/resources/js/",
            css: "templates/balmy/dist/resources/css/",
            fonts: "templates/balmy/dist/resources/fonts/",
            img: "templates/balmy/dist/resources/img/"
        },
        src: {
            html: "templates/balmy/*.html",
            js: "templates/balmy/resources/js/*.js",
            css: "templates/balmy/resources/css/balmy.css",
            fonts: "templates/balmy/resources/fonts/**/*.*",
            fontsCss: "templates/balmy/resources/css/fonts.css",
            img: "templates/balmy/resources/img/**/*.*",
            libsJs: [
                "lib/jquery/v3.1.1/jquery-3.1.1.min.js",
                "lib/jquery-easing/v1.3/jquery.easing.min.js",
                "lib/bootstrap/v4.0.0-alpha.6/bootstrap.min.js",
                "lib/magnific-popup/v1.1.0/magnific-popup.js",
                "lib/owl-carousel/v2.2.1/owl.carousel.min.js",
                "lib/bootstrap-multiselect/bootstrap-multiselect.min.js",
                "lib/bootstrap-multiselect/bootstrap-multiselect-collapsible-groups.min.js",
                "lib/viewportchecker/v1.8.7/viewportchecker.min.js"
            ],
            libsCss: [
                "lib/owl-carousel/v2.2.1/owl.carousel.min.css",
                "lib/owl-carousel/v2.2.1/owl.theme.default.min.css",
                "lib/animation/v3.5.1/animate.min.css",
                "lib/magnific-popup/v1.1.0/magnific-popup.css",
                "lib/bootstrap-multiselect/bootstrap-multiselect.min.css"
            ]
        },
        needBootstrap: true
    }
}

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

gulp build --template balmy

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

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

<script src="resources/js/libs.min.js"></script>

<script>
    $(document).ready(function () {

        $(".all-events-carousel").owlCarousel({
            loop: true,
            margin: 10,
            items: 1,
            animateOut: 'slideOutDown',
            animateIn: 'flipInX',
            autoplay: true
        })
    });
</script>

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

Но если удалить из 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 загружает последнюю точно. Вы можете выполнить поиск в этих файлах.