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 freed time!
4.0 (24 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,488 students enrolled
$25
Take This Course
  • Lectures 18
  • Contents Video: 1.5 hours
    Other: 1 min
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 3/2015 English

Course Description

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

Grunt is a task runner which is automating web development tasks and it will save you lots of precious time.

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

Sample tasks that gonna be executed for you by Grunt:

  • compressing of CSS and JS files -> making files smaller means faster loading speed of your website
  • 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 (improving loading website speed)
  • optimize your images -> reducing their file sizes without affecting quality
  • automatically adding vendor prefixes -> you won't need to worry about vendor prefixes anymore. Grunt is giving you the perfect solution with no performance hit and nothing new to learn.
  • find 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 once and enjoy your freed time! Build your websites faster and avoid repetitive work.

What's more you will know how to:

  • install Grunt.js/npm/Node.js
  • properly configure and install plugins
  • run tasks concurrently which will drastically improve needed time

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 4,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!

What are the requirements?

  • html, css, javascript

What am I going to get from this course?

  • 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

What is the target audience?

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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
01:10

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

00: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.

02:51

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

Section 2: Installation & Configuration
04:40

Downloading and Installing Netbeans IDE that we will work with

03: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

08: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.

Article

Fast summary of installation & configuration

Section 3: Grunt Plugins
11: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.

10: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
06: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.

06: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.

06: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.

01: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.

10: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.

03: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.

12: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.

04:39

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

Grunt Plugins Summary
6 questions
Section 4: Summary
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.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Arkadiusz Włodarczyk, 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 14,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 14 years and i've been programming for over 10 years. I have enormous experience in that matter and I want to share with you my knowledge.

If you have any questions regarding covered topics please feel free to ask.

Ready to start learning?
Take This Course