Speed up Drupal front end development

Speed up Drupal front end development

If theming Drupal feels slow and tedious, try these tips for faster font end development
Janna Malikova

Introduction

One of the tedious parts of any development is time from writing code to the moment you can see the change live, eg dreaded 'compilation' time. In web development compilation to executable is no longer required, but time between writing code and seeing the result is extended by compiling artefacts (js/scss), clearing caches, reloading browsers, etc. Front end frameworks (AngularJS, ReactJS, etc) brought in a lot of really nice tools to speed up development - js/scss watchers, browser hot-reloading, etc. In this blog, I describe how to setup a simple environment to speed up Drupal front end development without any additional task runners or npm dependencies. 

 

Prerequisites

Composer-based Drupal installation, running locally on example.local url.

 

1. Disable caching

Update settings.local.php file to disable cache and include development environment version of services.yml(for more details read this blog)

// Add development-environment only version of services.yml $settings['container_yamls'][] = DRUPAL_ROOT . '/sites/development.services.yml'; // Reduce caching. $config['system.performance']['css']['preprocess'] = FALSE; $config['system.performance']['js']['preprocess'] = FALSE; $settings['cache']['bins']['render'] = 'cache.backend.null'; $settings['cache']['bins']['dynamic_page_cache'] = 'cache.backend.null'; $settings['extension_discovery_scan_tests'] = FALSE;

Update development.services.yml to disable cache and then clear cache for changes to take effect.

services: cache.backend.null: class: Drupal\Core\Cache\NullBackendFactory parameters: http.response.debug_cacheability_headers: true twig.config: debug: true auto_reload: true cache: false

 

2. Compile SCSS on save

Sass command line tool has an option to watch scss files and compile to css.

Install latest SASS following the guide, then add to your composer.json scripts a new script:

"scripts": { "sass-compile-watch": [ "sass --watch web/sites/mysite/themes/custom/mytheme/scss/style.scss web/sites/mysite/themes/custom/mytheme/css/style.css" ], }

And then run it with --timeout=0 option to prevent composer to timeout. That will compile scss to css as soon as a file is saved.

composer run sass-compile-watch --timeout=0

 

3. Refresh browser on updates

The final step is to install BrowserSync, light weight proxy server, which refreshes browser as soon as there are any changes to *.css, *.twig, or *.js files:

 

npm install browser-sync -g

Add a new script to composer.json:

"scripts": { "browser-sync": [ "browser-sync start --proxy example.local --files \"**/*.css, **/*.js, **/*.twig\"" ], }

Then run it in a new terminal window:

composer run browser-sync --timeout=0

It's possible to run start both SASS watch and BrowserSync with one command, just add this to composer.json scripts and run:

"scripts": { "start-theme-dev": [ "sass --watch web/sites/mysite/themes/custom/mytheme/scss/style.scss web/sites/mysite/themes/custom/mytheme/css/style.css & browser-sync start --proxy example.local --files \"web/sites/mysite/**/*.css,web/sites/mysite/**/*.js, web/sites/mysite/**/*.twig\" && kill $!" ], } $ composer run start-theme-dev --timeout=0

Default browser will open your website on http://localhost:3000/ (BrowserSync port can be adjusted).

Any changes to *.scss, *.js or *.twig will trigger a browser refresh so you can see the changes almost instantly after saving the code.

BrowserSync has some other very handy features - like multi-browser testing. Read more details about Drupal and BrowserSync in this blog.

 

Conclusion

I tried to keep this setup bare-bones (there are tools like gulp or grunt which will setup and install all this for you). 

There are other libraries to explore like LivereloadJS but I'm not sure if it will pick up twig changes, something to explore.

 

Happy theming!