Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Development Tools

Alex Spataru
Alex Spataru
5,837 Points
Posted by Alex Spataru
Alex Spataru
5,837 Points

Really can't get the Grunt working

I saw the video, like 3 times or more but I really really can't get it...

I've tried to get the boilerplate (https://github.com/suzumakes/static-boilerplate) but, for example, I want to add Owl Carousel as a dependency of the project... I installed it, added into bower.json but I can't get it work. I mean, the css / js / images are not there (in the source)... :(

So what are the steps if I want to add something else? Like I said, Owl Carousel, or some jQuery plugins (jQuery Cookie, for example)?

2 Answers

John Halbert
John Halbert
12,922 Points
John Halbert
John Halbert
12,922 Points

You said you added to to the bower.json file, but did you do the bower install command in the same directory? I believe this will put all the files inside bower_components.

Alex Spataru
Alex Spataru
5,837 Points
Alex Spataru
Alex Spataru
5,837 Points

Thanks for the answer. I did that and the library was included in the main folder (dependency folder). However, I still can't get it included in my style.css file. I run bower install, bower update, grunt, grunt build... Nothing. I think that I have to include it in Gruntfile.js but I don't know where...

John Halbert
John Halbert
12,922 Points

Could you tell me: is this question in reference to the Up and running with Grunt video? If not, could you include the link?

Edit: Also, could you include your gruntfile.js?

Alex Spataru
Alex Spataru
5,837 Points
Alex Spataru
Alex Spataru
5,837 Points

Yes, the answer is regarding the video. My question was "if I want to add some more files, what should I do?".

Because the video didn't have any downloadable files, I started with https://github.com/suzumakes/static-boilerplate . But I got stuck when I wanted to also include owl-carousel (just for test, to see how it works).

John Halbert
John Halbert
12,922 Points

Does your owl-carousel use the stylesheets as well as the JS as in the example? Are you not seeing any owl styles in general, or not any visual styles? I mention the visual styles because an owl theme (owl.theme.css) might need to be included as well.

Alex Spataru
Alex Spataru
5,837 Points
Alex Spataru
Alex Spataru
5,837 Points

Edit: Yes, it's copy/paste.

I see all the css except the owl.carousel.css. I searched for "owl" css class but didn't find anything so I guess that it's not including the owl.carousel.css at all.

John Halbert
John Halbert
12,922 Points

Hmm, I see what you mean. Upon further inspection, it seems that grunt bower_concat:all doesn't even complain if Bootstrap is missing bootstrap.css. Even trying something stupid like including owl.carousel.css inside Bootstrap's mainFiles doesn't do anything. It seems like it's just compiling the JavaScript. Weird.

Ahah! Got it!

So the repository you utilized was using 

dest : "src/js/_bower.js",

It appears that the latest version deprecates using a string as an argument. Perhaps this is why the author chose the new syntax of: 

dest : {
   js : "src/js/_bower.js",
   css : "src/css/_bower.scss",
   scss : "src/css/_bower.scss"
}

Replacing that line with that object should fix it.

Alex Spataru
Alex Spataru
5,837 Points
Alex Spataru
Alex Spataru
5,837 Points

Thanks! Still nothing. :)) Can you please copy / paste your working file so I can see what I'm doing wrong?

John Halbert
John Halbert
12,922 Points
John Halbert
John Halbert
12,922 Points

So it looks like modifying the following files will get everything in your project needed to test. This is of course after running bower install owlcarousel

src/html/index.html 
<section id="main">
        <div class="owl-carousel">
            <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>

to include the demo HTML provided by OwlCarousel

src/js/config/scripts.js 
// Overlay

$(document).ready(function() {
    $('.overlay a').append('<span class="icn-more"></span>');

    $('.owl-carousel').owlCarousel({
    loop:true,
    margin:10,
    nav:true,
    responsive:{
        0:{
            items:1
        },
        600:{
            items:3
        },
        1000:{
            items:5
        }
    }
    });
});

to include demo JS provided by OwlCarousel

And making the following edits to the bower_concat section of your Gruntfile.js will compile everything together.

Gruntfile.js 
bower_concat: {
            all: {
                dest: 'src/js/_bower.js',    // destination for bower JS
                cssDest: 'src/scss/_bower.scss',    // destination for bower CSS

                // if Bower cannot identify the main file for a package, you need to specify it here
                mainFiles: {
                    'owl-carousel' : [ //needed for include to work properly
                        'owl-carousel/owl.carousel.js',
                        'owl-carousel/owl.carousel.css' 
                    ],

                    bootstrap: [
                        'dist/css/bootstrap.css',
                        'dist/js/bootstrap.js',
                     ],    // for 3.3.6
                },

                exclude: [],    // exclude components
                // EX: exclude: [ 'owlcarousel' ],

                include: [ //the component you want to include here
                    'owl-carousel'
                ],    // include components not automatically included
                // EX: include: [ 'backbone' ],

                dependencies: { //I can't seem to get this working for some reason.. 
                  'owl-carousel': 'jquery'
                },
                // if dependencies aren't managed, you can manually configure them here
                // EX: dependencies: { 'underscore': 'jquery' }

                bowerOptions: {
                    relative: false
                },
            },
        },

I grunt build, and I get a nice jQuery is not defined error in the browser. Woohoo! So now we should solve that error.

So, I removed the changes I made to Gruntfile.js. I did this to see if the default behavior of grunt_concat is properly working, which is to automatically include everything located in the bower_components folder. It turns out it was, and the result of running grunt build is

Can't detect any .src/js/_bower.js on main files for "owl-carousel" component. You should explicitly define it via bower_concat's mainFiles option.

Deleting the package solves this, and lets grunt compile. This lets me know it's an issue with the owl-carousel package, as opposed to my setup. This issue is caused because owl is not declaring its need of jQuery to operate. At first, I was wondering why the dependencies section wasn't intelligently including files, until I realized that jQuery was never included for some reason.

In the end, including jQuery along with owl-carousel in this section of the file should let it all work. Let me know if you have any questions! Hope this helped!

Gruntfile.js 
bower_concat: {
            all: {
                dest: 'src/js/_bower.js',    // destination for bower JS
                cssDest: 'src/scss/_bower.scss',    // destination for bower CSS

                // if Bower cannot identify the main file for a package, you need to specify it here
                mainFiles: {
                    'owl-carousel' : [
                        'owl-carousel/owl.carousel.js',
                        'owl-carousel/owl.carousel.css' 
                    ],

                    bootstrap: [
                        'dist/css/bootstrap.css',
                        'dist/js/bootstrap.js',
                     ],    // for 3.3.6
                },

                exclude: [],    // exclude components
                // EX: exclude: [ 'owlcarousel' ],

                include: [
                    'jquery',
                    'owl-carousel'
                ],    // include components not automatically included
                // EX: include: [ 'backbone' ],

                dependencies: {

                    'owl-carousel' : 'jquery',
                    'bootstrap' : 'jquery'
                },
                // if dependencies aren't managed, you can manually configure them here
                // EX: dependencies: { 'underscore': 'jquery' }

                bowerOptions: {
                    relative: false
                },
            },
        },
Alex Spataru
Alex Spataru
5,837 Points
Alex Spataru
Alex Spataru
5,837 Points

Thank you very much for digging into this. I finally got the js files working but now the css is not concatenating :( I mean the owl-carousel's css is not including in the project...

Edit: Ohh, Great! I tried to install jQuery matchHeight and everything worked fine. It's a matter of css now, the js is concatenating propretly.