Adding Bower Files to Sage (8.0.0)

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?

1 Like

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: http://evanhahn.com/disable-jshint-for-a-file/

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

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

  1. Add package to bower.json
  2. Declare which files you need from that package in "overrides": and create a handle.
  3. 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

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

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.

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

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 :frowning:
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. :laughing:

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