Better dependency management

[razvanz]

I see that bower installations of polymer and polymer components are tightly coupled with the folder structure.
That is fine for development, but when building for production I would like to extract all the main files for each dependency in a common folder.
Why?

• Static file access can be limited to only the required files.
• In the process I may want to compress everything in one big minified file (Maybe not the case for now, but later could be considered).
• It's easier to manage what exactly gets loaded on the client and find ways to optimize.

The way this should work is to specify the main files for each repository (component) and then to use a tool like main-bower-files to extract them in a common folder.

Another problem that needs to be solved is that polymer components assume a folder structure when they require the polymer file which in case of a common folder will result in broken links. A hack to solve would be to substring the directories from the path before the static files are served (which is basically polyserve), but I wouldn't like to have something like that in production.

Any thoughts on this?

[masonlouchart]

You can build your application with many launchers JavaScript tasks.
Take a look at Grunt, Gulp, Broccoli, Brunch,...

With this tools you can:

• minify your CSS, JS, HTML files
• merge your CSS, JS, HTML files
• replace imported files by the '.min' automatically
• and so one...

At the end, your production is 1 JS, 1 CSS and 1 HTML files all optimized and your imports ('.min').
Now I am using Gulp.

I hope have understood your post and I'm sorry for my poor English.

[razvanz]

@LM450N I'm not sure if you really understood my question. I'm not talking about building tools, but how polymer depends on a folder structure.

You were saying:

At the end, your production is 1 JS, 1 CSS and 1 HTML files all optimized and your imports ('.min').
Now I am using Gulp.

How are you minifying your polymer project in 1 HTML and 1JS?

[masonlouchart]

Maybe I have misunderstood the sense of your question.

In fact, I told you about a build tool because I think the dependencies manager is good.
Moreover, you said the project structure is fine for development environment.
If the deployed application is optimized (builded) the result is a couple of files so not a real structure.

To build my application I use GulpJs.
A serie of JavaScript tasks is defined in a gulpfile.js at the root of the project.
I have only to run the command gulp and my app is ready to be deploy.

If you have created your project with the Yeoman, more precisely the polymer generator, the gulpfile.js is initialized for you.
Between us, this file is not optimized, I suggest you to create yours.

I this answer helps you.

[razvanz]

@LM450N Again, I'm not talking about build tools. The essence of the questions is that right now I cannot use a tool like Gulp to easily retrieve all the dependency's main files from bower_components + my custom elements in a common build folder. Why?

1. Polymer and polymer components don't have main files specified in the bower.json file, therefore I cannot extract them from bower_components unless I manually specify the files.
2. If we say that I manually specify the files and extract them in a common folder, once loaded on the client side, polymer components will ask for polymer.html (or something else) assuming a folder structure (/bower_components/component-name/component-name.html). This means there will be a lot of 404's because the path for the build folder is different.

[masonlouchart]

In my gulpfile.js I run a task called "vulcanize".
Vulcanize is what you looking for.

[razvanz]

Yes. That would be something I'm looking for. Thanks!

[kevinpschaaf]

Closing: vulcanize sounds like what you want for concatenating dependencies into bundles for deployment.