Front end and theming

This page is out of date and needs reviewing.

Introduction to Gulp

In most of the themes we support and create we use a task runner to compile Sass into CSS. In almost every case this is Gulp. The Lando stack provides the tools you need to run the commands that trigger the task runner to do it's various tasks.

Previously we needed to maintain various versions of NodeJS and a globally installed Gulp on our computer. This is no longer the case as we provide a Docker container with all the tools needed.

Prerequisites

You should have already installed Lando. If you haven't yet done that, please head back to the introduction page of these docs and follow the install notes in the Installing Lando section.

Understanding these steps

Don't just copy paste each of the commands! You will need to edit some lines before hitting return. You will also need to open an editor (vim, nano etc) to modify lines in files.

Initial theme set up

On every computer where you set up a Lando site and you want to do some front end work, you will need to ensure the theme's node modules are installed and that a set up task has been completed.

Make sure your containers are running (run from git root):

lando start

Now change to the theme's directory (Drupal 8+ example):

cd web/themes/custom/site_theme

Check that Lando has installed the node modules:

lando npm install

Generally Lando will have already installed the node modules the first time it starts up. If something did not complete successfully you may need to install them manually with the above command.

If you are running the current site_theme on Drupal 8+ then you'll also need to set up Pattern Lab with:

lando npm run setup

How to compile Sass

Make sure Lando is running (run from git root):

lando start

Now change to the theme's directory (Drupal 8+ example):

cd web/themes/custom/site_theme

From here you can run the commands needed to compile Sass. This depends on the type of theme:

  1. Our current site_theme (modern D8 sites):

    lando npm start

  2. Older Omega based themes (most D7 sites):

    lando gulp

Simple right? Basically just prefix the command you want to issue with lando and the command will run inside the container, making use of the tools installed inside.

Last updated: