1072695 - [tracking] Integrate Bower and Gulp into our frontend projects

Status: RESOLVED FIXED

(Marketplace Graveyard :: Code Quality, defect)

Description

[Kevin Ngo [:ngoke]]

I'm spending free time on moving Commonplace's module management to Bower and integrating Gulp into our frontend projects. This also ties into the marketplace-constants project, having Bower serve the generated JS modules.

Commonplace's module management is monolithic. In the process of updating a Commonplace project, all of Commonplace files are simply overwritten into the project. This is fine for the core JS files that compose the framework, but it deters us adding files that we might not want to be shared across all projects. Such as with files that are specific to only Fireplace and Transonic, if we place them into Commonplace, they will get copied to non-related Commonplace projects. Another bad thing is that if we want to add a file to Commonplace, it has to be hardcoded in the update process for it to be distributed.

Bower/Gulp can rework how our Commonplace modules are distributed (and in doing so, get rid of a lot of old Node code that I've been maintaining).

Here's my current plan. I'm going to create a new folder in Commonplace called "dist" containing all of our reusable files. It might look like:

- core: core JS to the framework (e.g., builder.js, views.js)
- contrib: useful and reusable JS (e.g., feed.js, image-deferrer.js)
- core-css: base CSS components based off of style guides from UX/Phil (e.g., buttons.styl, colors.styl, typography.styl, nav.styl)
- contrib-css: reusable CSS files (e.g., feed.styl)
- templates: reusable templates (e.g., 404.html)
- img: common images (e.g., region flags, sprites)

Upon "bower install commonplace", this folder of delicious components will be downloaded into "bower_components". We can have Gulp copy these files into our projects. We can have a Gulp task that reads a config to whitelist which files to copy and where to them. Since the whitelisted files can vary from project to project, we can have this config be locally extendable.

I'm also planning on separating the Commonplace modules from the Commonplace bootstrap template. The bootstrap template will be put into a separate repo. If we want to spin up a new Commonplace project, just clone that repo and copy/paste.

Since we have Gulp anyways, we can also have it handle our packaged Marketplace builds rather than having a very messy Makefile. We can also have it do the watching/compiling/uglifying/minifying since there are a lot of plugins to do so.