将多个libs连接成一个时,不能使用lib函数
HAY*_*bl4 10 html javascript gulp
我试着学习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描述所有可能的网站模板的变量在哪里.当我执行时:
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)
也许有人知道为什么会这样吗？
我检查了您的附加libs.min.js文件，您缺少Bootstrap 4 的Tether。请参阅此问题来解决它：如何修复错误；'错误：Bootstrap 工具提示需要 Tether。我很快尝试将libs.min.jsCDN 的 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>
- 是的，由于所有库都包含在一个文件中，因此当错误发生时 JavaScript 的执行就会结束，并且 OwlCarousel 会被放置在之后，因此它永远不会有机会执行。当您单独包含它们时，浏览器尝试执行引导脚本但失败。然后它继续执行包含的其他脚本。这就是它起作用的原因。 (2认同)