Creating & Executing Front-End Tasks with Acquia BLT for Drupal

In a previous article, we took a look at how we can leverage Acquia BLT (Build & Launch Tools) for creating a new Drupal 8 project running on DrupalVM. Now that we have a site up and running, let's replace the default Drupal theme with a custom theme. This requires the use of NodeJS modules, gulp tasks, and miscellaneous scripts along the way, so let's dive in and examine it in more detail.

Introduction

There are plenty of Drupal themes out there that leverage the workflow mentioned above, and Acquia BLT can help automate these processes. This means we can spend less time mucking around with configuration and repetitive tasks like generating CSS files or clearing the site cache, which enhances the overall efficiency and productivity of our teams. The less time we spend in these areas means the more time we have to invest in delivering value by implementing must-have features for the website or application, as well as facilitating a faster time to market. 

Implementation

The first task, when replacing the default Drupal theme with a custom theme that utilizes a task-based workflow, is installing the npm dependencies defined in the package.json file of the theme. We can start by typing "npm install" into the terminal, but we can also take advantage of target hooks (events or triggers) within BLT to roll this aspect into the build and deployment process. One such task is called frontend-setup. We can wrap a half-dozen commands into one task with BLT, ensuring order and consistency, no matter who picks up the project, or when.

To replicate entering "npm install" into the terminal, we can add the target hook into the project.yml file (located at blt/project.yml of our project):

target-hooks:
  frontend-setup:
    dir: ${docroot}/docroot/themes/custom/mytheme
    command: 'npm install'

To execute this task, we can use the blt command:

blt frontend:setup

When we call this command from anywhere in the project, it will execute npm install in the given directory. Alternatively, we can also pass a path to a script to run:

target-hooks:
  frontend-setup:
    dir: ${docroot}/docroot/themes/custom/mytheme
    command: '../scripts/frontend/setup.sh'

This allows us to define multiple operations in a script to allow flexibility. For now, our setup.sh file simply contains:

#!/usr/bin/env bash

echo "Installing theme dependencies..."
npm install

Now that we have that, we can do the same for any gulp build tasks we have. A few of our common tasks are building css, js, and sprite files. Here, we can hook into the frontend-build task:

target-hooks:
  frontend-setup:
    dir: ${docroot}/docroot/themes/custom/mytheme
    command: '../scripts/frontend/setup.sh'
  frontend-build:
    dir: ${docroot}/docroot/themes/custom/mytheme/tools/gulp
    command: '../scripts/frontend/build.sh'

This task contains:

#!/usr/bin/env bash

echo "Building theme assets..."
gulp generate-css;
gulp minify-js;
gulp generate-svg-sprite;

Then at any time, we can execute:

blt frontend:build

This will then call all three commands in the script.

The included gulp commands call 3 tasks in our gulpfile.js in order: building CSS from a SASS source, building minified JS from JS source files, and generating an SVG sprite from various SVG assets. Don't worry about the details of what the gulp tasks do (like converting SASS files into CSS files), as this is just an example. If we wanted to expand on this, at the end of this script we could call the command line tool drush to clear the site cache for us (so the newly-generated files are picked up, and old cache references are deleted), which allows us to not have to log into and navigate the admin to execute the same task.

We can call blt frontend:build from the command line at any time, independent of a build or deployment process, which lends itself well to iterative development. Acquia BLT will call these target hooks every time blt deploy:build is executed. It can be automated through a continuous integration platform like Travis CI, CircleCI, or Acquia Pipelines.

In Summary

BLT comes with all the scripts we need to run deployments. We can also modify them or provide our own. Leveraging BLT for project building needs will ensure clean, consistent project builds with wicked smooth deployments.