Theme orientation

YAML Created with Sketch.
YAML Created with Sketch.

This is how a Compony-theme will look like when you download it the first time.

In the Documentation of the Compony-theme, we already covered a few aspects:

  • _sass-essentials
  • components
  • compony.libraries.yml
  • compony.theme

So let's now focus on the Gulp-specific files!

gulpfile.js #

Gulpfiles grow quite complex over time. To keep things more clear, Gulp made it possible to instead name a folder the same way, so that Gulp’s inner tasks can be separated off in to different files inside the folder. After having downloaded the npm-packages, you’ll need to dive in to this folder to configure it for your project. More on that later!

.nvmrc #

Gulp uses NodeJS by design. You likely already have a version of Node on your local system, but using different versions within a team working on the same project could give unexpected results.

To lock a version of Node for Compony to use, we defined it in a .nvmrc file. Currently the Node version we are using is 10.16.0:


When setting up our workflow, NVM will use this file to make sure each environment of your project, will use the same version of Node.

package.json #

This is the default configuration file so npm knows what to install once you set up.

package-lock.json #

This file is automatically generated by npm commands, and serves as much the same reasons Yarn introduced the yarn.lock file: it keeps a registry of the exact packages that were downloaded so you always have a fallback.

yarn.lock #

Compony is compatible with Yarn, which means that each environment / team member has the option to either use Yarn or the npm install workflow. Because Yarn is in many ways an enhancement on top of the normal installation process, it doesn’t matter in the end if you use Yarn or not.

A small note: Currently, the size of your node_modules folder will almost be double the amount of Megabytes if you use Yarn.