As already mentioned above, the most important changes have touched on the principles of the project construction and methods of its assembly. It's time to talk about Gulp.
A gulp is a tool for automating front-end development. It will help you automate routine tasks and speed up your work.
The main tasks that Gulp will help you to solve:
Useful links:
Gulp official site - gulpjs.com
Gulp at Github https://github.com/gulpjs/gulp
Gulp plugins catalog http://gulpjs.com/plugins/
Gulp documentation https://github.com/gulpjs/gulp/blob/master/docs/README.md#articles
So, we give you a brief instruction on how to get started with the templates assembler - GULP.
Step1. Node.js installation
To install Node, visit the nodejs.org site, click the green "Install" button. When the download is complete, start the application and install Node.
Step 2. NPM installation
At the command prompt, go to the main folder of your project: .../Olympus HTML.
If you created the project from scratch, you would have to run the command: npm init
It creates a package.json file that contains information about the project (project description and dependencies). But, since Olympus already contains this file, this step should be skipped.
Step 3. Gulp.js installation
Installation of Gulp is done with the command: npm install -g gulp
I want to clarify a few details right away:
- npm - is the application by which we install the package (plugin).
- install - we tell the command line to install the package.
- g - is a kind of flag indicating that we want to install the package globally.
- gulp - is the name of the package we want to install.
After we installed Gulp.js, let's make sure that everything is correct and enter the old command by analogy with Node and npm: gulp -v
The next command is to install Gulp locally in the project folder: npm install --save-dev gulp
The only difference is that we specify in our "flag" that we record dependencies in our package.json.
Step 4. Gulp.js setup and launch
To make Gulp work, you need to explain to him what it should do. There are several methods: task, start, and path to files. All tasks, their settings, and configurations are recorded in the../Olympus HTML/gulpfile.js file.
Let's analyze our file in more detail.
With the help of these commands, we enable Gulp and plugins that perform our tasks.
It's important to note, that each plugin needs to be installed by analogy with Gulp installation before one can use it. Once they are installed, you can begin to set them up in the very gulpfile.js file.
We won't review all the Gulp plugins and their possibilities, since there are a great many of them. But we will review the plugins used in Olympus in detail. So:
1) plumber = require('gulp-plumber'), // generates an error message
Installation: install --save-dev gulp-plumber
Description: This plugin makes development easier so, that when there occurs an error, it outputs information about it in the console and doesn't interrupt the implementation of tasks flow.
Documentation: https://www.npmjs.com/package/gulp-plumber
2) prefixer = require('gulp-autoprefixer'), // automatically prefixes to css properties
Installation: npm install --save-dev gulp-autoprefixer
Description: The plugin automatically complements CSS styles with vendor prefixes (-webkit, -ms, -o, -moz, etc). These prefixes ensure the support of CSS3 properties by browsers. This plugin is used in our 'sass' task:
Documentation: https://www.npmjs.com/package/gulp-autoprefixer
3) uglify = require('gulp-uglify'), // for minimizing js-files
Installation: npm install --save-dev gulp-uglify
Description: This plugin serves for JS file minification. It deletes unwanted gaps, commas, semicolons. As a result, the JS file is smaller in size. This plugin is used in our 'js' task:
Documentation: https://www.npmjs.com/package/gulp-uglify
4) cssmin = require('gulp-cssmin'), // for minimizing css-files
Installation: npm install --save-dev gulp-cssmin
Description: The plugin minifies CSS files with help of Gulp. It is used in our 'sass' task:
... .pipe(cssmin()) ...
Documentation: https://www.npmjs.com/package/gulp-cssmin
5) svgmin = require('gulp-svgmin'), // for minimizing svg-files
Installation: npm install --save-dev gulp-svgmin
Description: The plugin minimizes SVG files with help of Gulp. It is used in our 'svg-min' task:
Documentation: https://www.npmjs.com/package/gulp-svgmin
6) rename = require('gulp-rename'), // to rename files
Installation: npm install --save-dev gulp-rename
Description: The plugin enables rename files. It is used in the "sass" task. To rename the file, you need to add ".min" after minification
.pipe(rename({ suffix: '.min'}))Documentation: https://www.npmjs.com/package/gulp-rename
7) sass = require('gulp-sass'), // for compiling scss-files to css
Installation: npm install --save-dev gulp-sass
Description: The plugin serves to compilation SCSS files into CSS. It is used in the 'sass' task:
....pipe(sass( { linefeed: "crlf" }))...Documentation: https://www.npmjs.com/package/gulp-sass
8) webserver = require('browser-sync'), // for online synchronization with the browser
Installation: npm install --save-dev browser-sync
Description: BrowserSync is probably one of the most useful plugins, that a developer would like to have. It actually gives you the possibility to start a server, on which you can run your applications.
...
.pipe(webserver.reload({stream: true}));
…And now imagine for a second that you have Gulp running, which automatically compiles, for example, scss, and in the same task uses browserSync. That is, after compiling scss, the browser automatically reboots the page and pulls up all compiled changes to CSS accordingly. Convenient, isn't it?
Documentation: https://www.npmjs.com/package/browser-sync
9) imagemin = require('gulp-imagemin'), // for minimizing images-files
Installation: npm install --save-dev gulp-imagemin
Description: This plugin is intended for working with graphics, it optimizes images and records the result in the specified path. It is used in the 'images' task:
Documentation: https://www.npmjs.com/package/gulp-imagemin
10) htmlhint = require("gulp-htmlhint"), // for HTML-validation
Installation: npm install --save-dev gulp-htmlhint
Description: This is a simple HTML validator that we used in the 'html-valid' task:
Documentation: https://www.npmjs.com/package/gulp-htmlhint
11) webp = require('gulp-webp'), // for convert png in webp
Installation: npm install --save-dev gulp-webp
Description: It converts images from the “.jpg”, “.png” formats to “.webp”
Documentation: https://www.npmjs.com/package/gulp-webp
12) babel = require('gulp-babel')
Installation: npm install --save-dev gulp-babel
Description: It uses next-generation JavaScript, today, with Babel.
Documentation: https://www.npmjs.com/package/gulp-babel
13)
Description: By default, when you run Gulp, the tasks in it are executed asynchronously, which can sometimes lead to very undesirable and not logical actions ... Therefore, some tasks we will launch together, but some of them step-by-step. You can see it in the united tasks:
And now a few words about the launch of tasks and combining them. To run any task, you need to write on the command line:
gulp 'task name' and run it.
We also have 2 sets of joint tasks: 
Official Gulp documentation: