To install Node, visit nodejs.org website and then click on the green "Install" button. When the download is complete, launch the application and install Node.
At the command line, go to the main folder of your project: cd/html-hostsite
Note, that the path to the project for everyone can be individual, depending on its location on the local PC.
If you created the project from scratch, you would need to run the command "npm init" at the command line. It creates a package.json file that contains information about the project (description of the project and dependencies). But, since Hostsight already contains this file, skip this step.
Gulp installation is done with the command "npm install -g gulp"
We want to immediately clarify a few details:
npm is the application with help of which we install the package (plugin).
install - you tell the command line that you need 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 you have installed Gulp.js, make sure that everything is correct, enter the old command by analogy with Node and npm "gulp -v". It should display version of the installed gulp.
With the following command, we install Gulp locally in the project folder - "npm install --save-dev gulp"
The only difference is that we indicate in our “flag” that we write dependencies in our package.json.
TO make Gulp work, you need to explain to it what it should do.
There are some methods: task, launch and file path. All tasks, their settings, and configurations are registered in the file ../html-hostsite/gulpfile.js.
Let's analyze our file in more detail:
var gulp = require('gulp'), plumber = require('gulp-plumber'), // generates an error messageprefixer = require('gulp-autoprefixer'), // automatically prefixes to css propertiessass = require('gulp-sass'), // for compiling scss-files to cssbrowserSync = require('browser-sync').create(), // for online synchronization with the browser imagemin = require('gulp-imagemin'), // for minimizing images-fileswebp = require('gulp-webp'), // for convert png in webpcache = require('gulp-cache'), // connecting the cache library htmlhint = require("gulp-htmlhint"), // for HTML-validationrunSequence = require('run-sequence'), // for sequential execution of Gulp-taskssvgmin = require('gulp-svgmin'); // for minimizing svg-filesUsing these commands, we call Gulp and plugins that perform our tasks.
Note, that to use a particular plugin, it needs to be installed first, similar to installing Gulp itself.
After installing plugins, you can begin to configure them in the gulpfile.js file.
We will not describe all Gulp plugins and their features, as there is a great variety of them. But the plugins used in our template will be described in detail. So, let's start!
Installation: install --save-dev gulp-plumber
In a nutshell, this plugin makes development easier by the fact that when
errors occur, it displays information about them in the console and does not interrupt the execution of the task flow.
Documentation - https://www.npmjs.com/package/gulp-plumber
Installation: npm install --save-dev gulp-autoprefixer
It automatically appends vendor prefixes (-webkit, -ms, -o, -moz, etc.) to css styles. These prefixes provide browser support for CSS3 properties. This plugin is used in our "sass" task:
gulp.task('sass', function() { gulp.src('./HTML/sass/**/*.scss') .pipe(plumber()) .pipe(sass()) .pipe(prefixer( { browsers: ['last 12 versions'], cascade: false } )) .pipe(gulp.dest('./HTML/css')) .pipe(browserSync.stream()); });Documentation - https://www.npmjs.com/package/gulp-autoprefixer
Installation: npm install --save-dev gulp-sass
It serves to compile scss files into css. It is used in the "sass" task:
....pipe(sass())…
The result is recorded in .pipe (gulp.dest ('./ HTML / css'))
Documentation - https://www.npmjs.com/package/gulp-sass
Installation: npm install --save-dev browser-sync
BrowserSync is probably one of the most useful plugins a developer would ever want to have.
It actually gives you the opportunity to start the server, on which you can run your applications.
....pipe(browserSync.reload({ stream: true}))…
Now imagine for a second, that you have GULP running, which automatically compiles, for example, scss, and browserSync is used in the same task. That is, after scss compilation is completed, the browser automatically reloads the page and pulls up all entered and
compiled changes in css accordingly. Convenient, isn't it?
Documentation - https://www.npmjs.com/package/browser-sync
Installation: npm install --save-dev gulp-imagemin
This plugin is designed for working with graphics, it optimizes images and
The result is recorded by the specified path. It is used in the "images" task:
/*=========== Minimization IMAGE ==============*/gulp.task('images', function () { gulp.src('./HTML/img/**/*.*') .pipe(cache(imagemin({ interlaced: true }))) .pipe(gulp.dest('./HTML/img'));});
Documentation - https://www.npmjs.com/package/gulp-imagemin
Installation: npm install --save-dev gulp-webp
Task for converting images from PNG format into WEBP format.
Documentation - https://www.npmjs.com/package/gulp-webp
gulp.task('build', function(done) { runSequence('sass', 'html-valid', 'svg-min', 'images', 'convert-webp', done);});Installation: npm install --save-dev gulp-cache
As the name implies, it is used to cache data. It is used specifically in the "images" task.
A large number of images will be processed much longer, therefore, it would be nice to add cache to image processing, to save our time.
Documentation - https://www.npmjs.com/package/gulp-cache
Installation: npm install --save-dev gulp-htmlhint
A simple HTML validator that is used in the "html-valid" task:
/*============= HTML-validator ==============*/gulp.task('html-valid', function () { gulp.src("./HTML/*.html") .pipe(htmlhint());});Documentation - https://www.npmjs.com/package/gulp-htmlhint
Installation: npm install --save-dev run-sequence
By default, when Gulp starts, tasks are executed asynchronously, which sometimes can lead to very undesirable and illogical actions. It is for to avoid such situations, we use the run-sequence plugin, which helps establish dependencies on tasks.
Documentation - https://www.npmjs.com/package/run-sequence
Installation: npm install --save-dev gulp-svgmin
This is a plugin for SVG icons optimization.
/*=========== Minimization SVG ==============*/gulp.task('svg-min', function () { gulp.src('./HTML/svg-icons/*.svg') .pipe(svgmin({ plugins: [{ removeDoctype: true }, { removeComments: true }, { cleanupNumericValues: { floatPrecision: 2 } }, { convertColors: { names2hex: true, rgb2hex: true } }] })) .pipe(gulp.dest('./HTML/svg-icons/*.svg'));});Documentation - https://www.npmjs.com/package/gulp-svgmin
Now a few words about launching tasks, as well as about combining them.
To start any task you need to write on the command line: gulp 'task name' and run it.
We also have 2 sets of joint tasks:
/*============= Join tasks ==============*/gulp.task('default', function (callback) { runSequence(['sass', 'watch'], callback )});gulp.task('build', function(done) { runSequence('sass', 'html-valid', 'svg-min', 'images', done);});'default' - used mainly during the development process, includes ['sass', 'watch']
'build' - a complete assembly of the template, which includes tasks ('sass', 'html-valid', 'svg-min', 'images').
Gulp official documentation:
https://gulpjs.com/
https://gulpjs.org/