Our telephone

+44 7734 236137

Our WhatsApp:

+44 7734 236137

Опубликовано: 16.01.2021
Web technologies

Setting up Gulp v4 in 2020

Setting up Gulp v4 in 2020

Using the Gulp project builder makes the website development process much easier and faster.

By using the collectors at the output, you get minified (css, js, html files) and files adapted for different browsers (CSS files).


By using additional Gulp modules such as gulp-webp, you can convert your .jpg / .png images to the modern web .webp format, which will make your pages load faster.

Part 1 - Gulp installation

To install your previously installed Node.js, you can download it from the link.

Next, run the installation via the command line with the following command:

npm install --global gulp

The tag --global sets gulp for the whole system and you can use it in multiple projects.


Go to your project by using the command:

cd 

Enter the command:

npm init

This will create a package.json file, this file contains information about your project, dependencies, module settings.



Install gulp dependencies:

npm install gulp --save-dev

This command will locally install the necessary modules in the project.

Part 2 - Configuring Gulp

Create gulpfile.js


In this file, we describe the tasks we need and write all the modules for the further work.


What modules does Atekla web studio uses to develop their projects:


  • gulp-autoprefixer
  • gulp-file-include
  • gulp-sass
  • gulp-uglify
  • gulp-htmlmin
  • gulp-webp
  • gulp-clone
  • browser-sync

Gulp-autoprefixer - Builds a CSS file with prefixes for different browsers, plus adds rules to support older browsers.


Gulp-file-include - allows you to include your html files as if you were working with PHP

Gulp-sass - allows you to build CSS files if your project is written using SASS / SCSS

Gulp-uglify - minification of JS files

Gulp-htmlmin - minifying HTML files

Gulp-webp - convert JPG / PNG images to WEBP with image quality setting

Gulp-clone - allows you to save the original JPG / PNG image and transfer it to the project folder for use in browsers without WEBP support

Browser-sync - make up your project without hosting and using MAMP.


Part 3 - Creating the gulpfile.js

We connect the modules to the gulpfile.js file


'use strict';
const gulp = require('gulp'),
    atekla_autoprefixer = require('gulp-autoprefixer'),
    atekla_file_include = require('gulp-file-include'),
    atekla_sass = require('gulp-sass'),
    atekla_uglify = require('gulp-uglify'),
    atekla_htmlmin = require('gulp-htmlmin'),
    atekla_browserSync = require('browser-sync'),
    atekla_webp = require('gulp-webp'),
    atekla_clone = require('gulp-clone'),
    atekla_clonesink = atekla_clone.sink(),
    atekla_reload = atekla_browserSync.reload;

Creating paths for Gulp to work


const path = {
    build : {
        build_html : './<way to compiled files>',
        build_js : './<way to compiled files>/js',
        build_css : './<way to compiled files>/css',
        build_fonts: './<way to compiled files>/fonts',
        build_img : './<way to compiled files>/img',
        build_video : './<way to compiled files>/vid'
    },
    src : {
        src_html : './<way to source files >/*.html',
        src_js : './<way to source files>/js/*.js',
        src_css : './<way to source files>/css/*.css',
        src_fonts : './<way to source files>/fonts/**',
        src_video : './<way to source files>/vid/**',
        src_img : './<way to source files>/img/**/*.{jpg,jpeg,png,gif,ico,svg}',
    },
    watch : {
        watch_html : './<way to source files>/**/*.html',
        watch_js : './<way to source files>/**/*.js',
        watch_css : './<way to source files>/**/*.css',
        watch_fonts : './<way to source files>/fonts/**',
        watch_video : './<way to source files>/vid/**',
        watch_img : './<way to source files>/img/**/*.{jpg,jpeg,png,gif,ico,svg}',
    }
};

Webserver task - creates a local hosting for layout


gulp.task("webserver", function () {
    atekla_browserSync({
        server : {
            baseDir : './'
        },
        host : 'localhost',
        port : '3000',
        tunnel : true
    });
});

Webserver task - creates a local hosting for layout


gulp.task("img:build", function () {
    return gulp.src(path.src.src_img)
        .pipe(atekla_clonesink)
        .pipe(atekla_webp({
            quality: 70
        }))
        .pipe(atekla_clonesink.tap())
        .pipe(gulp.dest(path.build.build_img))
        .pipe(atekla_reload({stream:true}))
});

Fonts assembly task


gulp.task("fonts:build", function () {
    return gulp.src(path.src.src_fonts)
        .pipe(gulp.dest(path.build.build_fonts))
       .pipe(atekla_reload({stream:true}))
});

The task for assembling videos


gulp.task("video:build", function () {
    return gulp.src(path.src.src_video)
        .pipe(gulp.dest(path.build.build_video))
        .pipe(atekla_reload({stream:true}))
});

The task for building HTML


gulp.task("html:build", function () {
    return gulp.src(path.src.src_html)
        .pipe(atekla_file_include({
            prefix: '@@',
            basepath: '@file'
        }))
        .pipe(atekla_htmlmin({
            collapseWhitespace: true,
            removeComments: true
        }))
        .pipe(gulp.dest(path.build.build_html))
        .pipe(atekla_reload({stream:true}))
});

JS Build Task


gulp.task("js:build", function () {
    return gulp.src(path.src.src_js)
        .pipe(atekla_file_include())
        .pipe(atekla_uglify())
        .pipe(gulp.dest(path.build.build_js))
        .pipe(atekla_reload({stream:true}))
});

CSS Build Task


gulp.task("css:build", function () {
    return gulp.src(path.src.src_css)
        .pipe(atekla_sass({outputStyle: 'compressed'}))
        .pipe(atekla_autoprefixer())
        .pipe(gulp.dest(path.build.build_css))
        .pipe(atekla_reload({stream:true}))
});

The task for tracking file changes


gulp.task('watch', function() {
    gulp.watch(path.watch.watch_css, gulp.series('css:build'));
    gulp.watch(path.watch.watch_js, gulp.series('js:build'));
    gulp.watch(path.watch.html, gulp.series('html:build'));
    gulp.watch(path.watch.watch_img, gulp.series('img:build'));
    gulp.watch(path.watch.watch_fonts, gulp.series('fonts:build'));
    gulp.watch(path.watch.video, gulp.series('video:build'));
});

Our package.json settings for Gulp


"dependencies": {
    "browser-sync": "^2.26.13",
    "del": "^5.1.0",
    "gulp": "^4.0.2",
    "gulp-autoprefixer": "^7.0.1",
    "gulp-clone": "^2.0.1",
    "gulp-file-include": "^2.2.2",
    "gulp-htmlmin": "^5.0.1",
    "gulp-sass": "^3.2.1",
    "gulp-sourcemaps": "^2.6.5",
    "gulp-uglify": "^3.0.2"
  },
  "browserslist": [
    "> 1%",
    "ie >= 8",
    "edge >= 15",
    "ie_mob >= 10",
    "ff >= 45",
    "chrome >= 45",
    "safari >= 6",
    "opera >= 23",
    "ios >= 6",
    "android >= 4",
    "bb >= 10"
  ],
  "devDependencies": {
    "gulp-webp": "^4.0.1"
  }

Let's summarize

By using Gulp you get the following benefits:


  • Rapid development
  • Support for older browsers
  • Automatic image optimization and conversion
  • File minification
  • No need for your own hosting
  • Easy scalability
  • Easy project support

Ready gulpfile.js

Download the finished js file and place it in the root folder of the project - gulpfile.js

Get a new website

Click here to proceed
Get a free audit.
Fill out the form to receive a free audit of your website. We will reveal both its strengths and weaknesses.
, ! Your request for the website audit has been passed successfully.
We will send you the results on the next working day back to your email - !
Thank you for choosing our studio!
Get a free
consultation
Email us if you are ready to take the first step towards your new and improved business.
, , your request sended successfully,
our managers will contact you soon!