Basic Drupal theme with Gulp as a task runner

Building custom themes for Drupal can be done with tons of approaches and many different ways of automating routine CSS operations. Here is the short list of tools I use with Gulp that I find solve close to 100% of the most common needs for Drupal (as well as for other CMS custom development). Feel free to share your thoughts on this list in the comments below.

Common folders

dist contains all the prepared files such as css, javascript and image sprites.
fonts is for additional fonts (in most cases only for fontawesome).
images should contain all the images related not to content, but to the theme. Inside of images folder there’s also an icons sub-folder – all the files stored in it will be automatically glued into the image-sprite.
js is for custom theme’s javascript code.

SASS folder

This folder holds components of the theme such as:
base folder – the files containing basic styles of the site
components – divided into:
   page-elements – elements (components) of the page
   pages – styles for specific pages.
layout – the main layout of the site.
mixins – files with default mixins and custom mixins*.
variables – files for variables (colors, fonts, font-sizes, window sizes etc.) For color variables, use chroma. Chroma is a Sass library that manages a project’s color names, color variations, and color schemes.

* One interesting mixin to note is rem which is very flexible and allows us
to make responsive design easily. Just write down all the pixel values ​​within rem mixin and on compilation all values ​​will be turned into rem. Now with adaptive layout
you just need to reduce % html font-size and all sizes with rem values ​​will be decreased proportionally!


This file contains all the gulp tasks (it’s probably the most interesting thing in this theme!)

Task list in the file:

config – task is executed once when you install the localhost, it is called from postinstall of package.json. This task creates a config.json file that is designed to work with browser sync. In it the url/alias of your local instance should be set. This file is included in .gitignore;

sprite – generates a sprite from the images that are located in the images/icons folder. The generated sprite file will be stored in the dist folder (dist/sprite.png);

fonts – takes out all the necessary fonts out of our plugins that are located in the node_modules folder, and puts it in the fonts folder of the theme;

css_concat – calls the sass and sass_lint (below, each task will be described), and concatenates all the css files into one (main.css). Creates a minified copy for it (main.min.css). Output files go into the dist folder;

js_concat – same as css_concat, but works with js;

sass_lint – monitors the coding standards of the sass/scss (sass/scss linter)

sass – monitors the errors and displays an error as a modal window, adds comments for easier navigation in the browser inspector, automatically delivers all necessary prefixes.

watch – monitors changes in the files (js, sass, png) of the theme, automatically updates browser page when fully recompiled.

compile – just compiles the project.

Other files
package.json – a file with the list of all node_modules required for our gulp tasks;

sass-lint.json – a file that describes coding standards.

Theme template