In this section, we will learn about Gulp, Sass/Scss and Twig template engine.

But if you don't want to use these tools, make manual changes to the *.html files, assets/css/*.css files and assets/js/*.js files.

The first thing to prepare is Gulp.js, "A toolkit to automate & enhance your workflow".

This toolkit is very helpful for automatically compiling scss files into .css and twig templates into .html, when we modify the templates.

You need to follow the steps based on https://gulpjs.com/docs/en/getting-started/quick-start.

Literally you need to check for node, npm, and npx via CLI.

node --version

npm --version

npx --version

If they are not installed yet, please follow the instructions here.

In the next step you have to check Gulp CLI instalation.

gulp --version

If Gulp CLI is not installed in your environtment, please run the following command.

npm install --global gulp-cli

Sass is a professional grade CSS extension language. In this case we use .scss syntax.

To install this toolkit, you need to follow the steps based on https://sass-lang.com/install, make sure to use Command Line version.

Before you start, you need to check for node, npm, and npx as in Gulp.js Installation.

Next, install Sass using npm by running : npm install -g sass.

You can check installed sass version by running : sass --version.

Twig.js is a pure JavaScript implementation of the Twig PHP templating language (https://twig.symfony.com/).

To compile Twig.js template with gulp.js we can use gulp-twig package.

This package is also installed when running npm install in your project directory.

There is a package.json file in your project directory, which contains a list of required packages in the project.

Open CMD or Terminal and change directory to your project, for example : cd /designspace/project/directory-name/

Run npm install in your project directory.

You only need to install dependencies once, then you can run the gulp command.

After all of dependencies has been installed, run gulp command in your project directory.

Gulp.js will watch the changes in your scss and twig files,
then automatically compiling scss files into .css and twig templates into .html.