Introduction to Grunt Training:
Mode of Training: Grunt Online Training/Grunt Corporate Training/Grunt Virtual Web Training .
Duration Of Program: 30 Hours(Can be optimized as per requirement)..
Materials: Yes, we are providing materials for Grunt training.
Course Fee: Please register in website, so that one of our agent will assist you.
Trainer Experience: 11+ years.
Prerequisites for Grunt training:
- Basic idea on programming background is preferred for Grunt Training.
- This course is meant for people with some programming background.
- Those who want to get a better understanding of GRUNT Training.
Grunt online training course content
Overview of Grunt training:
- Grunt online Training is distributed as a node package and let’s head over to the console to show you how to install. So here I brought up the terminal in Mac and what you want to do is make sure that you onstall grunt as a global application. So it becomes available from anywhere inside of your terminal command line in Grunt Training.
- So let’s do that NPM for an o package manager install –g which stands for global grunt hit enter now.You may encounter some errors and this simply means I don’t have the permissions to install it the way I have it. So let’s do the sudo NPM install –g grunt enter my local password and and that should install successfully and then it’s done.
- We need to tell grunt training that we are going to configure it so we give it the command grunt init config this is actually a function we are calling and we are providing it this object and it’s an object of configuration.
- If we utilize the built in minification task we just simply write that and we are going to say this is our distribution and the first argument going to is the source. So this is the file that we want to minify in this case and I will go ahead and add the or minify the add function so remember that’s in the calculator folder. So I have to prefix with that so then I will say the destination is and I will just put this one at the root just so we can see it and I will just to add.min.js save it.
- Now what I need to do is ask grunt to run this and this is all I need to do this is the only configuration that I need to minify that add js file located inside the calculator folder. Let’s come to the terminal and type grunt. Now this is telling us there is no default task found. Well, I will get into how we can address that at the moment but what you can do is say alright but run the minified grunt min task and you will notice it says running men: dist and I will get into what that syntax means in just a moment file admin JS was created and we can even see it over here in our text editor uncompressed size 39 by its compressed sizes 50 bytes 30 bytes minified and so forth in Grunt Training.
- In Grunt Training Now let’s go and take a look at the original file here’s the add and here is the minified and you can see it got rid of the extra spaces didn’t need any comments if there were any made the parameters one character. So now let’s say that we want to minify all of the calculator files but let’s just take it one step at a time let’s just say I want the add and subtract. Well, we can simply say that source is now an array of files or array of strings and the string represents the u file path and I will say calculator slash subtract.As part of the regular web development almost every day we usually do some kind of repetitive tasks.
General Web UI DEV. Tasks in Grunt online Training:
- Minifying CSS files: In order to keep file size more we usually do minifying of jars css or even the java script files so minifying is nothing but the process of removing unnecessary blank spaces or lines in your file. For development we use run minified versions which actually help us to read the files and respond and understand the scripts much easier and for the production we usually use the minified versions which might look something like no one can read and really understand until and unless we use other tools to un minify them.
- Compiling SASS/ LESS to CSS & minify :so if you are familiar with SASS/LESS which are usually used for dynamic CSS we need to compile those particular files of SASS usually in the form of .SASS or .LESS so those files are dynamic in nature need to be compiled to get to CSS files. So once we have the CSS files again we can minify them as necessary.
- A simple SASS file might look something like this with all the variables and so on and once the CSS file as been generated you can see those variables will be replaced with the respective values directly as part of that particular CSS attribute. So in that way we can have some dynamic SASS/LESS files.
Conclusion of Grunt Training: