Asli

# Developers Workflow

In the following guide, you'll set up the Gulp environment and work 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 familiar with Sass, npm, or NodeJS, or if you'd like to simply replace the text and images of the template with your own without touching the 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 starting, make sure to check your current environment. In your shell terminal, enter the following:

node -v
npm -v

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

# ▶️ Step 2: Select a 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 you to use a specific Node version per project.

Navigate your terminal working directory to the 📁 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 the 📁 SOURCE folder. Navigate your terminal there using the cd (Change Directory) command.

cd /path/to/template/SOURCE

# ▶️ Step 4: Install Gulp

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

npm i -g gulp gulp-cli
npm i

# ▶️ Step 5: Configure Gulp

Open the 📁 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 see the template index page.

← Template Structure →