Gulp set up

This guide explains how to set up Node.js and Gulp on your computer and how to use the provided Gulp file for development tasks. Follow the steps below to get started.

Prerequisites

Before you start, ensure the following:

  • Node.js and npm: Installed on your computer.
  • Command Line Interface (CLI): Such as Command Prompt, Terminal, or PowerShell.
  • Gulp file: The provided gulpfile.js is in the project root directory.

Step 1: Install Node.js and npm

  1. Download the latest LTS version of Node.js from Node.js official website.
  2. Run the installer and follow the prompts.
  3. Verify the installation:
    • Open your CLI.
    • Run node -v to check the Node.js version.
    • Run npm -v to check the npm version.

Step 2: Install Gulp CLI Globally

  1. Run the following command in your CLI to install Gulp globally:
    npm install --global gulp-cli
  2. Verify the installation by running:
    gulp --version
    This should display the installed Gulp version.

Step 3: Set Up the Project

  1. Navigate to the project directory where the gulpfile.js is located:
    cd /path/to/your/project
  2. Install the project dependencies by running:
    npm install
    This will install all dependencies listed in the package.json file.

Step 4: Running Gulp Tasks

Local Development

  1. To start the development environment with live reloading:
    gulp --local
  2. This will:
    • Compile SCSS files into minified CSS.
    • Transpile and minify JavaScript files.
    • Start a BrowserSync server for live reloading.

Individual Tasks

  • Compile Styles:
    gulp styles
    Processes the scss/main.scss file into dist/main.min.css.
  • Compile Admin Styles:
    gulp admin_styles
    Processes the scss/admin/admin.scss file into dist/admin.min.css.
  • Compile Scripts:
    gulp scripts
    Transpiles and minifies JavaScript files into dist/main.min.js.
  • Watch for Changes:
    gulp watch
    Automatically runs tasks when source files are updated.