Gulp 4: Automate your development workflow
4.6 (16 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
80 students enrolled

Gulp 4: Automate your development workflow

Automate your development processes with Gulp 4 toolkit
Bestseller
4.6 (16 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
80 students enrolled
Created by Sergey Shtyrlov
Last updated 4/2020
English
English [Auto-generated]
Current price: $12.99 Original price: $19.99 Discount: 35% off
17 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 4 hours on-demand video
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Assignments
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Set up Gulp 4 toolkit and automate the development workflow with Gulp (sass and less styles preprocessing, html/css/javascript minification, javascript files concatenation, images optimization and caching, source maps, Babel javascript transpiling, html kit templating language)
Course content
Expand all 36 lectures 04:05:07
+ Gulp: basics
13 lectures 01:39:32
Gulp dependencies
06:54
Gulp installation
11:34
Gulpfile.js and our first task
08:24
Create project structure
04:13
Sass task
12:25
Update Sass task
12:16
Sass source maps
11:00
Gulp watch task
06:24
Gulp Browser Sync task
13:14
Add html watch task
06:28
At the end of the assignment you should have a fully functional «less» task that would allow to use the «less» preprocessor in our project for generating the css styles.
Assignment 1
3 questions
Module summary
00:38
+ Gulp: Optimize CSS, JS and images
9 lectures 01:13:15
Module introduction
00:40
CSS minify task
08:05
JS watch and minify task
11:44
Rename minified files
18:01
JS concatenation task
11:15
Image optimization task
08:24
Image cache task
10:00
Default Gulp command
04:03
Test your knowledge by answering the questions.
Assignment 2
5 questions
Module summary
01:03
+ Gulp: further improvements
8 lectures 47:59
Module introduction
01:12
HTML .kit partials task
12:36
HTML minify
04:43
CSS autoprefixer task
04:36
JS babel task
05:58
Optimize our gulpfile.js structure
09:25
Gulp Zip
06:52
Summary
02:37
+ Conclusion
2 lectures 01:59
Fully featured Gulp configuration file
01:34
Course wrap up
00:25
Requirements
  • HTML Basics, CSS Basics, Javascript Basics
Description

What's this course about?

In this course you will learn how to automate routine and tedious tasks with Gulp 4. The code editor for the course is Visual Studio Code (although you can use any code editor).


More details please!

If you have never heard of Gulp before, it is a special toolkit that allows you to automate routine tasks in web development. In this course I will show you how to set up Gulp 4, use different Gulp plugins, write tasks and track the file changes. At the end of the course you will have a fully functional gulp configuration file, which can be used in your own projects.

We will start from the very basics. I will show you how to install all the needed dependencies and the Gulp itself. Then we will explore how to write tasks and watch for file changes. Almost every lesson we will improve our gulp configuration file and add a new feature to it. I will also provide to you the complete gulp configuration file with additional comments describing most used Gulp APIs, glob patterns and a guide on setting up a task, so that you would have a good hint while creating your own tasks with Gulp.

If you still do routine tasks by yourself, Gulp will probably change it. Let’s get started!


What should you know to take the course?

Javascript basics, HTML basics, CSS basics


What's inside?

  • Installation of Gulp dependencies

  • Installation of Gulp

  • Basic Gulp tasks

  • Project structure

  • SASS preprocessing

  • LESS preprocessing

  • Watch for file changes

  • Styles source maps (SASS/LESS)

  • CSS minification

  • Javascript minification

  • HTML minification

  • javascript concatenation

  • File renaming

  • Images optimizations

  • Images caching

  • HTML templating language (Kit)

  • CSS Autoprefixer

  • Javascript Babel transpiling

  • Project archiving

  • Complete Gulp configuration file with comments that you can use in your own projects


Who is teaching you?

My name is Sergey Shtyrlov. I'm a frontend developer. I've been working in this sphere for almost 7 years and continue doing it today. Gulp is essential for web development and you will sure benefit from it!

Who this course is for:
  • You want to automate some of your development processes
  • You want to learn how to use Gulp