Anything you change in this file won't impact the generated files such as CSS or JavaScript of your components, in fact, nothing you change here, will have any impact on the end result of your project. These settings are to fine-tune your developer experience.

Let's have a closer look at the "features" key of our local configuration:

js-badge Created with Sketch.
local.config.js

module.exports = {
  features: {
    auto_rebuild_drupal_cache: {
      enable: false,
      cache_rebuild_command: 'drush cr'
    },
    browsersync: {
      enable: false,
      localhost_url: "https://local.dev/"
    },
    validate_yml: {
      enable: true,
    },
    lint_php: {
      enable: true,
    },
    lint_html: {
      enable: false,
    },
    lint_js: {
      enable: true,
    }
  },
  notifications: {...}
};

auto_rebuild_drupal_cache #

enable

Optionstrue, false

Defaultfalse

What is it for: The Gulp setup is smart enough to know when to rebuild cache: when you add a libraries.yml file for example or rename a .html.twig file. But won’t rebuild cache when you edit a Sass file or a Twig file.

If you do want Gulp to help you during development, set this variable to true, and make sure you fill in the command on the next line.

cache_rebuild_command

Options: any string

Default: ''

Some pointers: To know how this command should look, you have to know that Gulp will run this command from a fresh command line outside of your setup. To get you going, here are some examples:

For a standalone setup:

cache_clear: 'drush cr'

If you are using a Vagrant box:

cache_clear: 'vagrant ssh -c "cd /srv/www/projectname/web && drush cr"'

If you have a setup with Docker:

cache_clear: 'docker-compose exec -T cli bash -c "cd web && drush cr"'

If you are using Lando:

cache_clear: 'lando drush cr'

browsersync #

enable

Optionstrue, false

Defaultfalse

What is it for: Use Browsersync in your project. Browsersync is a tool that will automatically refresh the CSS and JS in the local version of your project by linking your files directly to the browser you are developing in.

For more information, please read the Browsersync in Compony documentation page.

To find out what url to use, you can read the documentation on Browsersync

localhost_url

Options: any string

Default‘https://local.dev/’

Some pointers: In order for Browsersync to work, you need it to tell how you would go to your local environment with a browser.

A few examples of how this could look:

browsersync_localhost: "local.my-website"

browsersync_localhost: "local.my-website:8080"

To find out what url to use, you can read the documentation on Browsersync

validate_yml #

enable

Optionstrue, false

Defaulttrue

What is it for: Use a linter that detects formatting errors in your component'slibraries.yml files.

The linter won't verify if the files that you link inside your libraries.yml files can be found on the path that you wrote.

Read more about libraries.yml files.

lint_php #

enable

Optionstrue, false

Defaulttrue

What is it for: Use a linter that detects formatting errors in your [component-name].theme files.

Read more about component.theme files.

lint_html #

enable

Optionstrue, false

Defaultfalse

What is it for: Use a linter that detects formatting errors in your [component-name].html.twig files.

The linter will ignore all Twig variables and expressions and will only lint the HTML from the template.

You can configure the rules that the tool uses by overwriting the gulpfile.js/options/htmlhintrc.js file. The defaults and the format of the rules can be found on a Github repository page of the HTMLHint tool.

lint_js #

enable

Optionstrue, false

Defaulttrue

What is it for: Use a linter that detects formatting errors in your my-component.js files.

You can edit the configuration of this linter by editing the gulpfile.js/core/options/.eslintrc.json file. By default this file looks like this:

js-badge Created with Sketch.
eslintrc.json
{
  "env": {
    "es6": true
  },
  "extends": [
    "eslint:recommended"
  ],
  "parserOptions": {
    "sourceType": "module"
  },
  "rules": {
    "no-undef-init": 0,
    "no-undef": 0,
    "no-undefined": 0,
    "no-unused-vars": 0,
    "no-empty": 0,
    "no-irregular-whitespace": 0
  }
}

You can edit the configuration of this file how you please by looking at which rules you would like to enable/disable: the different rules of ESLint.