GRUNT js: Automate web development tasks and save your time
4.1 (160 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.
29,123 students enrolled

GRUNT js: Automate web development tasks and save your time

Save time automating web development tasks like compressing CSS/JS files on fly. Set Grunt and enjoy your free time!
4.1 (160 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.
29,123 students enrolled
Last updated 7/2020
English
English [Auto]
Current price: $72.99 Original price: $104.99 Discount: 30% off
5 hours left at this price!
30-Day Money-Back Guarantee
This course includes
  • 1.5 hours on-demand video
  • 1 article
  • 10 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • 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
  • 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
Expand all 18 lectures 01:40:31
+ Introduction
3 lectures 04:50

After this lesson you will know what is Grunt.js and why it's so cool.

Preview 01:10

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.

Preview 00:49

Who is this course designed for? What can you accomplish after taking the course? How this course differs from others?

Preview 02:51
+ Installation & Configuration
4 lectures 18:09

Downloading and Installing Netbeans IDE that we will work with

Preview 04:40

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

Preview 03:54

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.

Preview 08:55

Fast summary of installation & configuration

Preview 00:40
+ Grunt Plugins
10 lectures 01:15:20

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.

Installing and executing tasks on example using Autoprefixer
11:58

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
How to configure tasks on example using Autoprefixer
10:14

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.

Watching for Changes: contrib-watch
06:59

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 CSS files: contrib-cssmin
06:40

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.

Automatically Compressing and merging JS files: grunt-contrib-uglify
06:23

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.

Load many grunt tasks at once
01:41

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.

Image Optimisation
10:04

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.

Preview 03:48

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.

JShint - find bugs in your Javascript code instantly
12:54

After this lesson you will make your task run at least 3x faster.

Run many tasks at once and improve the speed: grunt-concurrent
04:39
Grunt Plugins Summary
6 questions
+ Summary
1 lecture 02: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:

  1. reduce the time needed for creating and maintaing CSS code
  2. create fast clean responsive web design
  3. 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.

Preview 02:11
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 240,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.