Question

我试着学习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));
});

变量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是变量，描述所有可能的网站模板。当我执行时：

gulp build --template balmy

我还设置了参数，其中包含我想要构建的模板名称。

之后我将这个js文件包含到我的html中并尝试使用owl carousel函数：

<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）

也许有人知道为什么会这样？

Answer 1

通常在已经缩小的文件上运行uglify插件并不是一个好习惯。我可以看到你提到的大多数JavaScript文件已经缩小了。

通常的缩小可能会删除已公开的功能。

请尝试从链中删除uglify来电，看看是否有效。

Answer 2

我检查了您附加的libs.min.js文件，但您缺少Tether for bootstrap 4.请参阅此问题以解决此问题：How to fix the error; 'Error: Bootstrap tooltips require Tether 。我很快就尝试将你的libs.min.js与来自CDN的Tether和owlCarousel CSS放在一个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/tether@1.2.4/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>

Answer 3

我会在concat()之前和之后添加JS syntax checking，并暂时遗漏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));
});

Answer 4

也许这些js文件中存在命名冲突，有两个文件都有一个名为$的变量，后者不是jQuery obj，当你单独添加文件时，jQuery完全加载了后者。您可以在这些文件中进行搜索。

将多个libs连接成一个时，不能使用lib函数

4 个答案: