GRUNT js: Automate web development tasks and save your time
- Description
- Curriculum
- FAQ
- Reviews
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 250,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!
-
1
What is Grunt.js?After this lesson you will know what is Grunt.js and why it's so cool.
-
2
Who Am I?
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.
-
3
What you will know after this course?
Who is this course designed for? What can you accomplish after taking the course? How this course differs from others?
-
4
BONUS: Installation of great editor for Grunt.js
Downloading and Installing Netbeans IDE that we will work with
-
5
Node.js & npm & grunt-cli
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
-
6
Configuration of Gruntfile.js and package.json
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.
-
7
Fast summary of Installation & ConfigurationFast summary of installation & configuration
-
8
Installing and executing tasks on example using Autoprefixer
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.
-
9
How to configure tasks on example using Autoprefixer
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
-
10
Watching for Changes: contrib-watch
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.
-
11
Automatically Compressing CSS files: contrib-cssmin
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.
-
12
Automatically Compressing and merging JS files: grunt-contrib-uglify
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.
-
13
Load many grunt tasks at once
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.
-
14
Image Optimisation
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.
-
15
Compressing images only if a new one is added: grunt-newer
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.
-
16
JShint - find bugs in your Javascript code instantly
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.
-
17
Run many tasks at once and improve the speed: grunt-concurrent
After this lesson you will make your task run at least 3x faster.
-
18
Grunt Plugins Summary
