GRUNT js: Automate web development tasks and save your time
4.1 (33 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,536 students enrolled
Wishlisted Wishlist

Please confirm that you want to add GRUNT js: Automate web development tasks and save your time to your Wishlist.

Add to Wishlist

GRUNT js: Automate web development tasks and save your time

Save time automating web development tasks like compressing CSS/ JS files on fly. Set once and enjoy your released time!
4.1 (33 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
1,536 students enrolled
Last updated 8/2015
English
Current price: $10 Original price: $65 Discount: 85% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 1.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I 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
View Curriculum
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 21,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 is the target audience?
  • 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.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
18 Lectures
01:40:46
+
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:14

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:45
+
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
About the Instructor
Arkadiusz Włodarczyk
4.5 Average rating
2,625 Reviews
25,004 Students
13 Courses
Excellent teacher, Expert in Programming

I am the author of 27 very popular video courses about programming, web-development and math in Poland. I've also created 7 video courses in English. Over 24,000 people enrolled in my Udemy courses. I put all my heart into creation of courses. I always try to explain everything the easiest possible way. I'm sure that my courses will help you in the programming and web development adventure :)

I believe that everyone has the ability to develop software if they are taught properly. Including you. I'm going to give you the context of each new concept I teach you. After my course you will finally understand everything that you code.

I've been developing websites for over 15 years and I've been programming for over 10 years. I have enormous experience in that field and today I want to share with you my knowledge.

If you have any questions regarding any of the covered topics in my courses, please feel free to ask.