GRUNT js: Automate web development tasks and save your time

Name: GRUNT js: Automate web development tasks and save your time
Rating: 4.2 (191 reviews)

Save time automating web development tasks like compressing CSS/JS files on fly. Set Grunt and enjoy your free time!

Created byArkadiusz Włodarczyk

Last updated 6/2026

English

What you'll learn

install and configure Grunt.js, npm, Node.js
minify and merge CSS and JS files -> which will improve website loading speed
automatically add vendor prefixes, after setting the project you won't need to think about vendor prefixes anymore
find Javascript bugs almost instantly -> no more time consuming debugging of Javascript code
dramatically decrease time needed for running many tasks at once

Course content

5 sections • 19 lectures • 1h 41m total length

What is Grunt.js?1:10
After this lesson you will know what is Grunt.js and why it's so cool.
Who Am I?0:49
Bragging lesson about myself ;) J/K. you probably want to know who is the person that is gonna teach you. Here is a quick intro to my person.
What you will know after this course?2:51
Who is this course designed for? What can you accomplish after taking the course? How this course differs from others?

Installation of great editor for Grunt.js4:40
Downloading and Installing Netbeans IDE that we will work with
Node.js & npm & grunt-cli3:54
Node.js is like an emulator for invoking Javascript code outside of web browser which is needed to invoke Grunt.js which is Javascript file. NPM stands for node package manager and it manages modules.

In this lesson we gonna install Node.js which includes npm.

After it we will also install first package: grunt-cli
Configuration of Gruntfile.js and package.json8:55
First configuration of Gruntfile.js. After this lesson you will know how to configure Gruntfile.js and package.json properly. You will know how to install your first task.
Fast summary of Installation & Configuration0:43
Fast summary of installation & configuration

Installing and executing tasks on example using Autoprefixer11:58
After this lesson you will know how to install your first task and run it using Grunt. Autoprefixer is a cool task which as name suggests is automatically adding vendor prefixes for CSS 3 properties which are not supported in some browsers.
How to configure tasks on example using Autoprefixer10:14
After this lesson you will know:

how to change default options

how to make support for older browsers

how to change the threshold when vendor prefixes should be applied using autoprefixer
Watching for Changes: contrib-watch6:59
After this lesson you will not have to each time run tasks manually. You will be able to set a watch task that will watch for changes. If something happens in watched files it will invoke the task you specify automatically.
Automatically Compressing CSS files: contrib-cssmin6:40
After this lesson you will know how to automatically compress CSS files and connect more than one CSS file. Because of it your website will load faster.
Automatically Compressing and merging JS files: grunt-contrib-uglify6:23
After this lesson you will know how to automatically compress JS files and connect more than one JS file. Because of it you will have less requests to server and your website will load faster.
Load many grunt tasks at once1:41
After this lesson you will know how to replace many loadNpmTask functions with just one. Because of it you will save your time while installing new tasks.
Image Optimisation10:04
After this lesson you will know how to optimise all images at project with just one click, because of it you will save lots of bandwith on your server and your website will load faster.
Compressing images only if a new one is added: grunt-newer3:48
After this lesson you will know how to apply tasks so they will run only if there is a change. Because of it for example if you do not add any new image the task won't compress anything. If you add 2 images, only those 2 images will be compressed. Because of it your tasks will run faster and you won't need to wait long.
JShint - find bugs in your Javascript code instantly12:54
JShint as the name suggests is gonna give you lots of hints about your Javascript code. It will decrease the time needed for debugging your code. It will find the 'silent' bugs that are the hardest to spot in Javascript. It will save your tons of hours on debugging code.
Run many tasks at once and improve the speed: grunt-concurrent4:39
After this lesson you will make your task run at least 3x faster.
Grunt Plugins Summary

What after this course?2:11
Hello,

I've shown you in this course the most useful plugins in my opinion. After this course you should go and look for the plugins you might like. As you can see there are thousands of entries on this website.

What language you should learn next?

It all depends on what you know right now.

By now you should know in order:

HTML, CSS, Javascript

If you don't know them very well you should definetely go and learn them first.

With the HTML, CSS and JavaScript you can create dynamic websites however you are not able to store any data which is very important in order to be able to create things like shops/forums/blogs.

So it would be good idea to go and learn PHP and MySQL which will allow you to create lots of great web applications.

It's also good idea to learn something what is called jQuery. Jquery will save lots of your time while developing Javascript code. The motto of jQuery is to "do more, writing less" and really believe me you can do in jQuery things in 5 minutes that would take you even 1 hour time to create in the basic Javascript.

It's good idea to also learn SASS which is gonna:

reduce the time needed for creating and maintaing CSS code

create fast clean responsive web design

divide your project into logical modules without losing website loading speed

and many more.

If you have any questions please feel free to ask. If you liked my course please leave a review. Thak you for watching and have a good day.

Requirements

html, css, javascript

Description

As a front-end developer you have to do many time-consuming tasks.

Grunt is a task runner automating the web development tasks, it will save you a lot of precious time.

As always time = money. Save your time by learning Grunt.

Sample tasks that are going to be executed for you by Grunt:

compressing of CSS and JS files -> making files smaller means that your website will load faster
merging CSS and JS files -> you can maintain many JS/CSS files and at the end use only one. This is decreasing the number of required requests (which also improves the website's loading speed)
optimizing your images -> reducing their file sizes without affecting quality
automatically adding vendor prefixes -> you won't need to worry about vendor prefixes anymore. Grunt gives you a perfect solution with no performance hit and nothing new to learn.
finding Javascript bugs almost instantly -> bugs in JS are the hardest to spot. With JShint one of the Grunt plugins you can forget about this problem.
and many more -> there are over 4,000 plugins available

After my course you will know everything I mentioned above!

Set it once and enjoy your saved time! Build your websites faster and avoid repetitive work.

What's more, you will also know how to:

install Grunt.js/npm/Node.js
properly configure and install plugins
run tasks concurrently which will drastically improve the needed time for execution of task

I give you 100% satisfaction - if you do not like my course you can request a full refund up to 30 days. Remember that if you have any questions regarding topics covered in the course please feel free to ask. I'm always happy to help!

Over 350,000 people from around the world enrolled in my courses

Please check free lessons before buying! See for yourself the great quality of the course and enjoy it!

Who this course is for:

This Grunt.js course is meant for people who are familiar with HTML, CSS and Javascript. No prior knowledge about Grunt.js/Node.js/npm is needed. Everything is described from the beginning.

GRUNT js: Automate web development tasks and save your time

What you'll learn

Explore related topics

Course content

Introduction3 lectures • 5min

Installation & Configuration4 lectures • 18min

Grunt Plugins10 lectures • 1hr 15min

Summary1 lecture • 2min

BONUS1 lecture • 1min

Requirements

Description

Who this course is for: