Packaged version through bower

[oskarrough]

Packaged version through bower

[4www]

that would be exquisite!

[desandro]

Use bower list --sources to easily list all the source files in proper order, required to use Packery. Bower handles the dependencies, but it's up to you on how you want to use them (i.e. concat and minify them together).

Please follow up if you're not sure how to use Bower for Packery.

[davecranwell]

I'm afraid I'm still having trouble understanding what I'm meant to do with Bower.

bower install packery results in a folder "app" with subdir "components" (not "bower_components" as some have mentioned in other threads), into which there are 10 different dependencies installed.

Am I meant to reference every one of those js files in my HTML before the packery script? That's pretty yukky if so.

I understand that the recommended solution is probably to use requirejs, but it's still unclear exactly which of these 10 dependencies I need. If you're not familiar with AMD development, the dependency on requirejs itself is an almost vertical learning curve for those that just want to evaluate packery and then perhaps go no further with it.

[desandro]

@davecranwell Bower documentation is under going. I wish I had place to point you to to resolve your questions, but right now, we (the Bower team) don't have one yet.

In the mean time, you are better off using a packaged source file.

Am I meant to reference every one of those js files in my HTML before the packery script?

Yes. but you can concatenate and minify these files using other services. I use Grunt.

[rowanu]

Is there any plan to include the Gruntfile that you work with (to concat and minify the files) in the repo?

[rowanu]

Also related - what are your (@desandro) thoughts on including the packery.pkgd.js and packery.pkgd.min.js files in the root directory of the repo? I can see you've done this for desandro/isotope already.

[desandro]

Is there any plan to include the Gruntfile that you work with (to concat and minify the files) in the repo?

Not currently. I did put together https://github.com/desandro/organize-bower-sources to facilitate this. I should probably document how to use it.

Also related - what are your (@desandro) thoughts on including the packery.pkgd.js and packery.pkgd.min.js files in the root directory of the repo?

These are built files and therefore not good for source control. Isotope currently has this, but it will be removed in v2.

[perry]

Has there been any update on this?

I am using bower for a project and I am having trouble loading all of the dependencies for both packery and draggabilly. How are you building the packaged script? Could you share the Gruntfile? Thanks.

[desandro]

How are you building the packaged script? Could you share the Gruntfile?

• packery-docs/Gruntfile.js
• metafizzy/grunt-fizzy-docs
• desandro/organize-bower-sources

There's several parts at work here. I'll try to break it down.

organize-bower-sources

organize-bower-sources is a node script that takes the big JSON from bower list --json and make a hash out of it for each file type, ordered by dependency first.

{
  '.js': [
    'bower_components/get-style-property/get-style-property.js',
    'bower_components/get-size/get-size.js',
    ...
  ],
  '.css': [
    'bower_components/normalize.css/normalize.css'
  ]
}

With that, you can integrate into your Grunt tasks for concatenation and minification. Which I do in the int-bower task.

---

I really should make a grunt task that's less specialized, so you can hook up Bower sources into Grunt tasks.

[perry]

Thanks @desandro.

[nijikokun]

This is very messy. You should provide packaged versions.

[svnlto]

This is very messy. You should provide packaged versions.

this.

[marczking]

I include the packery file myself and not via bower. I set up bower and wanted to include packery via bower because I thought it would make things easier... But with packery this is not the case.

I'll use bower anyways atm and see how I get along.

[desandro]

I've reconsidered 🌅 With the next release, I'll be offering packery.pkgd.js and packery.pkgd.min.js with Bower. Thank you for your patience!

[perry]

👍

[kosir]

That's great! +1

[desandro]

It's up and available as of v1.2.3 https://github.com/metafizzy/packery/tree/master/dist

[perry]

✨ ✨ - thanks!

[marczking]

very cool! Thank you