Get started

Note

At the time of 05.18.2022, one of the plugins does not work with Node versions older than 16.0. Before starting the project, in order to avoid errors, you need to install Node 16.0, for example, here: https://nodejs.org/en/blog/release/v16.0.0/

Load

  1. Copy the path to the repository: https://github.com/Ulyanov-programmer/Gulp_Default_Project.git

  2. Start Visual Studio Code, where by selecting the Explorer item, select Clone repository

  3. In the pop-up window, enter the previously copied path to the repository and select the folder where you want to save the files.

Launch

  1. Make sure: path to the current project folder is specified in the terminal!

  2. Enter in the terminal (ctrl + j or view => terminal) npm i command. If there are no errors in the process, you will see something like this:

  3. Start Gulp from the terminal by entering the gulp command.
    (If this command doesn't work (you find something like "this command do not founded"), try installing gulp-cli via npm -g install gulp-cli )

    A window with the main page of the project will open in the browser by default (if it does not load correctly, you may need to update it using ctrl + f5).
    Note: that your dist folder will be named the same as the folder where you installed the build.

Clearing

The build contains the script that will help you remove unnecessary (including my demo and slider connection).

To do this, enter the node clean command in the terminal, and follow the text in the console.

  • It delete the demo content.
  • It will prompt you to delete the connection of the slider files and their settings file.
  • It will offer to remove scripts and styles for certain purposes (for example, burger menu or filters).
    • You should see something like this.

Production mode

If you run the build through the gulp command, you will see that some of the functionality does not work.
This is normal, the build can be run in one of two modes:

  • Started via the gulp command entered in the terminal.
  • Quick start of the build.
  • Images are not converted or optimized.
  • Prefixes are not added to css properties.
  • Media queries are not grouped.
  • Scripts are not compressed.
  • Automatically converted images are not connected.
  • Started via the gulp --prod command entered into the terminal.
  • Slow start of the build.
  • Images are converted and optimized.
  • Prefixes are added to css properties.
  • Media queries are grouped.
  • Scripts are compressed.
  • Automatically converted images are connected.