@benword, thanks! Never used that feature before.
Re: the js errors, they were ones from within the plugins js files not ones I wrote. They showed up because I manually wrote in the paths above "scripts/main.js".
So, maybe I just need a few steps to help me out. Here’s a quick run down of the steps to add a bower dependency. Let me know if I’m doing anything wrong here. For my example I’m going to use Chart.js.
- Add package to
bower.json - Declare which files you need from that package in
"overrides":and create a handle. - Add that handle to
manifest.json.
Is that it?
{
"name": "sage",
"homepage": "http://roots.io/sage/",
"authors": [
"Ben Word <ben@benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"modernizr": "2.8.2",
"jquery": "1.11.2",
"bootstrap": "3.3.1",
"chart.js": "1.0.1"
},
"overrides": {
"modernizr": {
"main": "./modernizr.js"
},
"bootstrap": {
"main": [
"./less/bootstrap.less",
"./js/transition.js",
"./js/alert.js",
"./js/button.js",
"./js/carousel.js",
"./js/collapse.js",
"./js/dropdown.js",
"./js/modal.js",
"./js/tooltip.js",
"./js/popover.js",
"./js/scrollspy.js",
"./js/tab.js",
"./js/affix.js",
"./fonts/glyphicons-halflings-regular.eot",
"./fonts/glyphicons-halflings-regular.svg",
"./fonts/glyphicons-halflings-regular.ttf",
"./fonts/glyphicons-halflings-regular.woff"
]
},
"bootstrap-sass-official": {
"main": [
"./assets/stylesheets/_bootstrap.scss",
"./assets/javascripts/transition.js",
"./assets/javascripts/alert.js",
"./assets/javascripts/button.js",
"./assets/javascripts/carousel.js",
"./assets/javascripts/collapse.js",
"./assets/javascripts/dropdown.js",
"./assets/javascripts/modal.js",
"./assets/javascripts/tooltip.js",
"./assets/javascripts/popover.js",
"./assets/javascripts/scrollspy.js",
"./assets/javascripts/tab.js",
"./assets/javascripts/affix.js",
"./assets/fonts/glyphicons-halflings-regular.eot",
"./assets/fonts/glyphicons-halflings-regular.svg",
"./assets/fonts/glyphicons-halflings-regular.ttf",
"./assets/fonts/glyphicons-halflings-regular.woff"
]
},
"chart.js": {
"main": "./chart.js"
}
}
}
{
"dependencies": {
"main.js": {
"files": [
"scripts/**/*",
"scripts/main.js"
],
"main": true
},
"main.css": {
"files": [
"styles/main.less"
],
"main": true
},
"editor-style.css": {
"files": [
"styles/editor-style.less"
]
},
"jquery.js": {
"bower": ["jquery"]
},
"modernizr.js": {
"bower": ["modernizr"]
},
"chart.js": {
"bower": ["chart.js"]
}
}
}
1 Like
@emaildano keep in mind that you only need that explicit entry in manifest.json for chart.js if you want it to be a separate file. If you want it to be part of main.js then you don’t need to do anything after the Bower steps.
Just installing via Bower may result in some JS errors because unfortunately the Chart.js bower.json file lists a minified JS file in main. Looks like a good candidate for a pull request on that project.
Apart from that and @swalkinshaw’s comment, these steps look good (i.e., no need to touch manifest.json at all if you want the Chart.js script minified into your concatenated JS file).
My only addition is that some devs find a command line installation easier/quicker:bower install Chart.js --save.
2 Likes
I just mentioned that to elaborate for other viewers and in case the OP (or anyone else) wants to submit a PR to that project.
Make sure you have the latest gulpfile: https://github.com/roots/roots/commit/c6a0f6eab9fd995caa4cfcc6e88d109fa1c99a86#diff-b9e12334e9eafd8341a6107dd98510c9R173
JsHint will only run on your project javascript now. Previously it did run on all JS including third-party bower files (bad).
Are ya’ll ready for a flowchart?
13 Likes
Hi!
My steps for adding photoswipe:
bower install photoswipe --save
add PhotoSwipe to bower.json:
{
"name": "sage",
"homepage": "https://roots.io/sage/",
"authors": [
"Ben Word <ben@benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"modernizr": "2.8.2",
"bootstrap-sass-official": "~3.3.5",
"photoswipe": "~4.0.8"
},
"overrides": {
"modernizr": {
"main": "./modernizr.js"
},
"photoswipe": {
"main": [
"./dist/photoswipe.js",
"./dist/photoswipe.css",
"./dist/photoswipe-ui-default.js",
"./dist/default-skin/default-skin.css",
"./dist/default-skin/default-skin.png",
"./dist/default-skin/default-skin.svg",
"./dist/default-skin/preloader.gif"
]
},
"bootstrap-sass-official": {
...
add PhotoSwipe to manifest.json:
...
"modernizr.js": {
"bower": ["modernizr"]
},
"photoswipe": {
"bower": ["photoswipe"]
}
...
After run gulp
I get 2 images from PhotoSwipe in “/dist/images/”, but nothing for js and css.
Sage 15/6/20
bower v.1.4.1
Any hint?
More info:
If delete “photoswipe” section from manifest.json - compiled “main” script and style include PhotoSwipe files. But nothing for the SVG file.
bower.json:
{
"name": "sage",
"homepage": "http://roots.io/sage/",
"authors": [
"Ben Word <ben@benword.com>"
],
"license": "MIT",
"private": true,
"dependencies": {
"modernizr": "~2.8.3",
"fastclick": "~1.0.6",
"jquery-flipster": "~1.0.1",
"owl-carousel": "~1.3.2",
"components-font-awesome": "~4.5.0",
"foundation-sites": "~6.0.5",
"motion-ui": "~1.1.0"
},
"overrides": {
"modernizr": {
"main": ["./modernizr.js"]
}
}
}
manifest.json:
"dependencies": {
"main.js": {
"files": [
"scripts/**/*",
"scripts/main.js"
],
"main": true
},
"jquery.flipster.js": {
"files": ["../bower_components/jquery-flipster/src/jquery.flipster.js"],
"main": true
},
"main.css": {
"files": ["styles/main.scss"],
"main": true
},
"jquery.flipster.css": {
"files": ["../bower_components/jquery-flipster/dist/jquery.flipster.css"],
"main": true
},
"editor-style.css": {
"files": ["styles/editor-style.scss"]
},
"jquery.js": {
"bower": ["jquery"]
},
"fastclick.js": {
"bower": ["fastclick"]
},
"owl.carousel.js": {
"bower": ["owl-carousel"]
},
"modernizr.js": {
"bower": ["modernizr"]
}
},
"config": {
"devUrl": "http://192.168.0.200:8888/genesis_it/"
}
}
Owl carousel doesn’t work 
Don’t compile in main
add new jquery libs has been very hard
Owl Carousel doesn’t work for me either.
Bower.json override:
"owl.carousel": {
"main": [
"./src/scss/*",
"./dist/owl.carousel.js"
]
},
It compiles to main.css but doesn’t seem to do anything…
I don’t think it needs an override, in the owl.carousel’s bower.json the main is declared correctly:
"main": [
"dist/owl.carousel.js",
"dist/assets/owl.carousel.css"
],
1 Like
for some reason my gulp had buggy
thanks, solved!
You shouldn’t need to include a star, there should be one entry scss file. And that should be added via wiredep to your app.scss file, just like Bootstrap’s files.
I don’t know if a star will work with scss files anyways.
@kalenjohnson and @Twansparant, thanks. @Twansparant is right. Owl css and js compile with gulp. Unfortunately something else is going wrong. I can find the classes (like ‘owl-item’) in my compiled main.css, but the properties are not applied to the element with the corresponding class… I will post the solution here once I find it.
Update: Turns out I had to manually add .owl-carousel class to the wrapper to make the css selector add it’s properties. 
I’m trying to add my first frontend package to Sage 8.3.0. I’ve spent hours on this. The package is De Sandro’s Masonry.
First (and only?) step should be simply using bower:
bower install --save masonry
From what i had understand reading the documentation, Gulp with asset-builder should collect js file marked as main in package’s bower.json, and that’s ok. That package is very simple, only one file js, no issue here.
...
"description": "Cascading grid layout library",
"main": "masonry.js",
"dependencies": {
...
I suppose the .js should “compile” in dist/scripts/main.js without any extra steps, like stated in the documentation. Should be not necessary to add manually masonry to manifest.json
What happens after launching ‘Gulp’ is that my main.js is compiled badly without masonry and others custom behaviour script. No errors at all by Gulp are shown processing.
Reading this post i have tried to set an override and use mainfest.json to separate the masonry.js from main, but in any case i’m not able to get my dist main.js back to work, until i remove masonry package from bower.json dependencies…
I’m not able to understand if my issue is related to the library or wrong workflow…
2 Likes
Have a look at the Isotope chapter here: https://roots.io/using-bootstrap-with-bower-how-to-override-bower-packages/
Probably same issue with the bower.json: https://github.com/desandro/masonry/blob/master/bower.json
Try overriding it with the ./dist/masonry.pkgd.js file
Thank you for the advice, it seems to point in the right direction as a asset-builder issue, like stated here .
I have luckily found also an Austin Pray’s hint in this post so i used:
“overrides”: {
“masonry”: {
“main”: [“./dist/masonry.pkgd.min.js”],
“dependencies”: {}
}
}
And i got at least my main javascript back to work. For what i had understand, these issues are probably caused by library’s dependencies misconfigured in package’s bower.json . Not already checked if Masonry is properly working but now it should.
Steep learning curve with these tools…
I’m having trouble adding the Materialize Bower Package following the steps above. Any ideas: https://stackoverflow.com/questions/38705866/steps-to-add-materialize-bower-package-to-sage-theme
It looks like you’re not actually using Bower. Simply adding the Materialize project to your JSON configs and attempting to include it manually isn’t using Bower.
I ran $ bower install materialize --save in my theme dir and it worked instantly (although I did need to make several overrides to get SASS and fonts working correctly).