Adding Bower Files to Sage (8.0.0)

emaildano · January 27, 2015, 4:10pm

I’m pretty new to gulp but I’m giving it a try. How / where would I include other Js files from Bower?

With Grunt it was pretty straight forward but now I’m pretty sure these files go into manifest.json but I’m not 100% or know how to add other files there.

Any help here would be much appreicated!

{
  "dependencies": {
    "main.js": {
      "files": [
        "scripts/**/*",
        "scripts/main.js"
      ],
      "main": true
    },
    "main.css": {
      "files": [
        "styles/main.scss"
      ],
      "main": true
    },
    "editor-style.css": {
      "files": [
        "styles/utilities/editor-style.less"
      ]
    },
    "jquery.js": {
      "bower": ["jquery"]
    },
    "modernizr.js": {
      "bower": ["modernizr"]
    }
  }
}

@austin, I just realized that’s apart of your asset-builder repo. I’m looking though the docs and I included a new Js file but it won’t clear jshint. I included it to be apart of main.js.

How do I include Js files here without them coming up in Js hint?

ben · January 27, 2015, 4:48pm

Bower assets are automatically included because we use main-bower-files. You can override which assets get pulled in by a package by editing bower.json and overriding main — you can see how we’re doing that with Bootstrap.

Don’t you want to fix your JS errors? Anyway: Disable JSHint for a file

cfx · January 27, 2015, 5:53pm

For quick reference, the bower.json overrides are here (for now): https://github.com/roots/roots/blob/8.0.0/bower.json#L14

emaildano · January 27, 2015, 6:03pm

@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".

emaildano · January 27, 2015, 6:35pm

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"]
        }
    }
}

swalkinshaw · January 27, 2015, 8:10pm

@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.

cfx · January 28, 2015, 12:14am

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.

swalkinshaw · January 28, 2015, 1:08am

@cfx he added the override in his bower.json above to get the unminified version.

cfx · January 28, 2015, 12:43pm

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.

austin · January 28, 2015, 5:42pm

@emaildano

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).

austin · January 28, 2015, 6:30pm

Are ya’ll ready for a flowchart?

vralle · July 9, 2015, 8:20pm

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.

Pablo_Gates · December 17, 2015, 2:40pm

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

noudilus · December 22, 2015, 8:53pm

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…

Twansparant · December 22, 2015, 9:04pm

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"
],

Pablo_Gates · December 22, 2015, 9:32pm

for some reason my gulp had buggy
thanks, solved!

kalenjohnson · December 22, 2015, 9:48pm

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.

noudilus · December 23, 2015, 7:09pm

@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.

marmitta · December 29, 2015, 7:24pm

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…

Twansparant · December 29, 2015, 7:39pm

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