# Developers Workflow

In the following guide you'll setup Gulp environment and you'll be working with *.sass, *.js and *.html files. It's assumed that you already have NodeJS and npm (opens new window) installed on your machine.

WARNING

The source files are intended for use by experienced users. If you're not familar with Sass, npm, NodeJS or you'd like to simply replace texts and images of the template with your own ones without touching JS code please refer to Classic Workflow

# Requirements

  • NodeJS v19 or later
  • npm v9 or later
  • Gulp v4 or later

# Installation

# ▶️️️️️ Step 1: Check Node environment

Before start make sure to check your current environment. In your shell termnial enter the following:

node -v
npm -v

The commands above should display the current Node and NPM versions.

# ▶️️️️️ Step 2: Select different Node version (optional)

If your Node version is different from the required one, you can install and use NVM – Node Version Manager (opens new window) This manager allows to use the specific Node version per project.

Navigate your termnial working directory to 📁 SOURCE folder. The following command will set the currently used NodeJS version to the required one:

nvm use

# ▶️️️️️ Step 3. Change terminal directory

In the template locate 📁 SOURCE folder. Navigate your terminal there using cd (Change Directory) command.

cd /path/to/template/SOURCE

# ▶️️️️️ Step 4: Install Gulp

It's recommended to install Gulp and Gulp CLI globally so gulp command will be accessible via system terminal.

npm i -g gulp gulp-cli
npm i

# ▶️️️️️ Step 5: Configure Gulp

Open 📁 SOURCE/gulpfile.js file and specify the working directories and optionally turn on/off minification:

const
  compilation = {
    src: '.', // source dir (current)
    dist: '../HTML', // compilation dir
    minify: true
  };

# ▶️️️️️ Step 6: Run Gulp tasks

gulp default

In your browser open http://localhost:3000/. You should the see template index page.