How to Use Gulp To Streamline Your Theme Development Process in Drupal 8

Automate all site-building tasks and streamline your theme development process! In short: reduce development time and boost your productivity as a Drupal 8 themer with Gulp! But how to use Gulp to automate your workflow?

How do you set it up and run its toolchain in conjunction with Drupal? How do you move away from the old practices of the “good old days”,  when you had to write your themes in pure CSS?

Since you had no alternative...

How do you “harness Gulp's power” to automate tasks that are crucial for your Drupal 8 theming process such as:

 

• compiling SASS and LESS
• watching/generating CSS files from SASS
• testing
• generating static design pattern pages
• reloading the browser 
• optimizing assets: images, JavaScript, CSS
   

Well, keep reading and “thou shalt find out”!

 

But What Is Gulp, After All?

I confess I couldn't come up with a better definition for Gulp, than the one on the official site:

"… a toolkit for automating painful or time-consuming tasks in your development workflow, so you can stop messing around and build something."

More often than not referred to as “build tools”, Gulp is a front-end automation tool aimed at streamlining your theme development process.

Basically, it enables you to have all those tasks that are critical (and time-consuming) for your workflow run... automatically!

And thus to give your productivity as a Drupal themer a significant boost!

 

Why Use Gulp over Other Theme Development Streamlining Tools?

Here are 3 of the strongest reasons why:

 

1. because Gulp configurations are conventionality simpler, shorter
2. because using Gulp you get to capitalize on a wider community support
3. because it runs faster, as well
    

How to Install Gulp

A word of caution: since Gulp is a node module, make sure you install Node.js (this, of course, if you haven't installed it already) first things first.

Needless to add that:

 

1. you should go for the latest version of Node.js
2. the installation process depends (and may differ) greatly on the Operation System that you're using
    

Install Homebrew, then run the following command:

$ brew install node

Now, for installing Gulp, type the following command:

npm install gulp-cli -g

Where “npm” stands for the “Node Package Manager” used for installing Gulp on your PC. And where the “-g” flag signals that Gulp should be installed globally on your PC.

 

Creating Your Gulp Project: Set Up Your Package.json File

As you well know, Node.js uses “npm”, a package manager “in charge” with downloading and installing all the modules required for a given project.

And all these modules get defined in a “package.json” file. 

So, this is the step you, too, should take now: setting up your package.json file in the very root of your Drupal 8 installation.

For this, just run the following command inside that directory:

npm init

It's inside this newly created package that all the key information about the node packages required for your specific project gets stored!

Therefore, make sure to fill up all the needed information as you put together your package.json.

Note: still, you should also know that all the prompts are ideally intuitive and that even if you leave those fields blank, you can always come back later and change the default values.

Remember to set the entry point to “gulpfile.js” and, once you add the required information for your project, keep in mind to specify your git repository.

An Important Word of Caution!

Your “How to use Gulp to automate my theming tasks in Drupal 8?” question should be accompanied by: “How to prevent triggering a segmentation fault?”

One that you might involuntarily trigger once you run Drush. Since Drush will consider the node package's own .info file files as part of Drupal and since it doesn't recognize their format... trouble happens.

Here's how you avoid segmentation fault:

add a script to the package.json file, whose main role will be to remove all the .info files from the node_modules folder

And now, let's go back to our package.json setting up process!

One last piece of advice that I'd like to add: if you've run the “npm init” command for creating your package.json file, remember to identify the “scripts” section and to replace the following line:

"test": "echo \"Error: no test specified\" && exit 1"

… with this one:

"postinstall": "find node_modules/ -name '*.info' -type f -delete"

And one more thing: set up the following .npmrc file in your theme folder's root:

unsafe-perm = true

Here's how the “intro” of your package.jso file' structure will look like:

"name": "...",

  "version": "...",

  "description": "...",

  "main": "...",

  "author": "...",

  "private": true,

  "devDependencies": {

    "browser-sync": "...",

    "gulp": "...",

Once you have your package nicely set up, go ahead and install Gulp into your project by running this command:

npm install gulp --save-dev 

Note: you might be wondering why you need to install Gulp... again. The answer is simple: first, you installed Gulp globally and now you're installing it into your Drupal project!

In this respect, it's  “--save-dev” which will let your PC know that Gulp needs to be added as a dev dependency in your packgage.json. All Gulp files and dependencies associated with it will get downloaded and a “node_modules” folder will get created.

 

Set Up Your Gulpfile.js

You're not yet done with setting everything up! There's still one important step to take before you discover how to use Gulp to create and to automate your site building tasks: setting up the gulpfile.js!

For this, just:

 

1. go to your custom theme directory
2. manually create a gulpfile.js file by either using the cmd/terminal or just by right-clicking to create a new file
    

Note: keep in mind to change the config variable so that it should match your paths! Also, make sure that all your CSS gets stored in the same “CSS” directory in your theme (for example: sites/all/themes/my_theme/css/application.sass) 

 

How to Use Gulp to Create and Automate Key Tasks for Your Workflow

And finally, we've reached our “destination”! 

The very goal of this blog post after all: determining which site building tasks are crucial for my/your own workflow, creating them and then automating them all with Gulp!

Do you fancy automated:

 

• Sass compiling into CSS?
• cache clearing
• “detection” of all the changes you will have applied to your .scss files?
• page reloading?
   

And your “wishlist” might go on... 

Well, the answer to your “How to use Gulp to automatically run task “x” or “y”?” is simple:

 

Just run the gulp [task_name] “magic formula” in your terminal! 

 

Here are some examples: 

 

• gulp.task('watch', function () which will watch for all the changes applied to your scss files and automatically recompile 
• gulp.task('reload', ['clearcache'], function () which will clear cache, then automatically reload the page 
• gulp.task('browser-sync', function() which will automatically run the BrowserSync server

In order to get the whole process started, simply type “gulp” in your terminal.

The END! Your turn now!

Time to use Gulp to its full potential and to automate all those key (and time-consuming) aspects of your theme development process in Drupal 8!