Menu
I try to learn gulp. I have a task which concat all js lib into one 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 is a array with following values:
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
}
}
Where templates is variable which describe all possible site template. When I excecute:
gulp build --template balmy
I also set parametr with name of template which I would like build.
After that I include this js file into my html and try to use a owl carousel function:
<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>
This code close to bottom of body. In browser console I see next exception:
But if delete from html a concat js and add all concated js files it will work fine.
This is the result libs.min.js which only concatenated and didn't minified (without call uglify)
Maybe anybody know why does it happen?
956
It's not a good practice usually to run the uglify plugin on already minified files. I can see that most of your referred JavaScript files are already minified.
Minification in general can potentially remove exposed functionality.
Please try to remove the uglify call from the chain and see if that works.
68
I checked your attached libs.min.js file and you are missing Tether for bootstrap 4. See this question to resolve it: How to fix the error; 'Error: Bootstrap tooltips require Tether .
I quickly tried to put together your libs.min.js together with Tether from CDN and the owlCarousel CSS in an index.html file and it works:
<!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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
