Some projects can sit inside cfgov-refresh, but manage their own asset dependencies. These projects have their own package.json and base templates.
The structure looks like this:
- App's own dependency list is in
cfgov/unprocessed/apps/[project namespace]/package.json - App's
node_modulespath is listed in the Travis config https://github.com/cfpb/cfgov-refresh/blob/master/.travis.yml#L10 so that their dependencies will be available when Travis runs.
- Apps may include their own webpack-config.js configuration that adjusts how
their app-specific assets should be built. This configuration appears in
cfgov/unprocessed/apps/[project namespace]/webpack-config.js
- Apps may include a
browserlist config
file, which is automatically picked up by
@babel/preset-envinside the webpack config, if nobrowsersoption is supplied.
- Images should be compressed and optimized before being committed to the repo
- In order to keep builds fast and reduce dependencies, the front-end build does not contain an image optimization step
- A suggested workflow for those with Adobe Creative Suite is as follows:
- Export a full-quality PNG from Adobe Illustrator
- Reexport that PNG from Adobe Fireworks as an 8-bit PNG
- Run the 8-bit PNG through ImageOptim
- Apps use a jinja template that extends the
base.htmltemplate used by the rest of the site. This template would reside incfgov/jinja2/v1/[project namespace]/index.htmlor similar (for example, owning-a-home).
!!! note
A template may support a non-standard browser, like an older IE version,
by including the required dependencies, polyfills, etc. in its
template's {% block css %} or {% block javascript scoped %} blocks.
Templates that are served by the Django server: cfgov\jinja2\v1
Static assets prior to processing (minifying etc.): cfgov\unprocessed.
!!! note
After running gulp build the site's assets are copied over to cfgov\static_built,
ready to be served by Django.