 My name is Yapa You know Time is probably the most valuable commodity in the universe If you don't have time you may have many things, but they are they are of no use We all are born with a certain amount of time and We spend a good amount of it in software development as web developers Time is precious whether you are only Tied that line or not you need to save it you need to make sure that you're making the most efficient use of it and then The human brain is probably the smartest computer in the universe capable of many amazing things at the same time it gets distracted very very easily so as a Web developer you might be working on something and then you know you're distracted Let's say you have to move some files from another location to another location minify them, ugly fire them many things so These are housekeeping work as a web developer You should reserve your brain CPU cycles for your primary task that's web development not on housekeeping these things can Be taken care of by an automated build system, and that's what I'm going to talk about specifically gulp.js, which is probably the The Build system which is rising at the metering rate for web developers so my Talk is titled save time in your brain CPU cycles with gulp.js as I was mentioning about automated build systems What are they probably most of you are familiar with them? Maybe a few of you are not yet familiar with them so automated build systems are software systems Which does the tedious and repetitive tasks for you to create a version of software which can be distributed and put on a production server so a Long time ago actually that not that long time ago, but in internet year internet years is actually Long let's say maybe 10 years ago Web development used to be very simple There was no need for a build system and as the web and the web development industry grew there were needs for a build system for web developers as well and we started using Build systems use in in other domains for example We used to use Apache and make files and with time These things came to be written in Ruby Python and even in Bear script But still the web developer was not really empowered and Something happened in 2009 No JS was created It gave JavaScript system-level access now you could write tools That could be written that were written in Java, Python, Ruby or any other general-professor programming language a JavaScript developer could now do system-level programming as well and as expected There was a Cambrian explosion of sorts in the JavaScript world Multiple libraries and tools came out as a result Maybe a few of you also created your own tools using Node.js So it was only a matter of time that Someone would come up with an automated build system Written in JavaScript. It did and it was called grunt Maybe a lot of you have used grunt to automate your tasks and build your applications So this is a very basic grunt file What it does is It will minify Some CSS files. It works as expected as promised But it makes me question a few things Okay, take a good look at this file and then here are my questions Why is the grunt file a module? Okay, and why is the grunt initialization done by the developer and Why is it dependent on package.json? And there is something called node npm tasks Why is it named that way and Why is it named tasks a plural? Plural tasks when If you can see the if you can see it, sorry In the second line you can see grunt.load npm tasks, okay, and there's only one thing loaded, but still it's called tasks and then the minify plugin It does not just minify it will even add a banner in your minified file It will also concatenate your CSS files You know, it's really confusing why a plugin should do more than one thing Okay, you may think that okay. It's a good thing that a plugin does multiple things, but if it's named minify Why should it do something more than minifying and if that is the approach? You never know what the plugins with UV using would be doing and Finally Can the interface be simpler? So these things had to be addressed and someone did in the form of Gulp. So Gulp is relatively very new maybe around four months old but it's gaining popularity Getting popularity at a very very Unexplainable rate everyone is everyone is adopting Gulp now if you see how it works So this is a basic Gulp file So if you look at it and compare what you saw in the grunt file, I think It's much more obvious what it's it's trying to do is basically in Node.js program. So Take a look at the code. It's it's loading gulp and loading two plugins and there's a task called default which which processes the files which are specified in the src and then It's piped to the the minify plugin and then it's piped to the Concat concat plugin and finally it's moved to the destination folder Okay, so how do you? Install Gulp installing Gulp is very easy and pme install minus g gulp And then you would need to have a local version of it as well So you have to the npm install save dev go To get the gulp plugins you go to gulp.js.com slash plugins Get the names and the plugins are basically node modules So you have to install them as how you would install any other node module And then I'm gonna give you a very quick demo of grunt versus gulp So this is the gulp file This is the grunt file both of them. They do the same thing. Okay? It's the same thing Look at it. What was the the size of the file? This is gulp and this is grunt Okay, so I'm gonna run them Let's start with grunt it took 250 milliseconds is a voice quite fast. Okay Now let's run the same thing using gold it took only 55 milliseconds and This is a very basic example if you're working on a big project you see that gulp gulp is completing the tasks in milliseconds and grunt would be taking seconds so Both of them they did the same thing What they do is they have to minify the CSS file and concatenate and Move it to a destination directory Sorry, not that actually it was the Default okay Sorry, sorry, sorry This is a slightly more complicated task. Let's see how long takes for 4.6 seconds So there you have it it's around four four milliseconds so That would be it Any questions Yeah, hi so Well performing the grand task. I mean it's a gulp task. Can we exclude a? Some some sort of files or CSS or JS files. Yeah, we can actually okay. Yeah, the syntax is quite similar to grant actually Okay Sorry, no, no, they're not okay, then like are there enough tasks like plugins available for gulp gulp right now we have around 240 something probably it will serve all your needs Okay, I if until and unless you're trying to do something very complicated The the plug in system is easy probably you could write if the plug is not there Hi Why is it so fast? Why is gulp so fast? Okay, so So the thing is that Grunt is When is using multiple tasks It has this concept of using temporary files, okay This this particular task this particular plug-in will do is stuff moving to some directory and the other plug-in will get it from there do it Get it gets work done and Maybe create another temporary file or moving to the destination directory, but when it comes to go Once the file the files are loaded they never test the file system again until unless the whole work is done on the file stream They they move they go to the file system only after the whole Plug-ins have done their job. That's the reason why it's really fast So what feature feature is what what else you have compared to grant so grant we can do image optimization Yeah, yeah everything so yeah, yeah, you know, how you differ you from Grant when you say about this for milliseconds, right? Mm-hmm. I don't care, you know when I'm in this development in the room So till if affect the page load yes, yes, so I'm fine with grunt. So what else you have? Okay, so best if you're happy with grant if anyone who's very very happy with grant despite seeing that the interface is much cleaner more logical in Gulp and You can obviously see this much faster Despite that if you're not willing to move to go up. I would say, you know, that's the best tool for you So the thing is that the the interface of gulp is much much cleaner much more obvious Compared to grant and it's faster So, you know, what what can grant do which gulp cannot It's only the interface neater faster Ultimately it's up to the plug-ins, you know what the plug-ins can do. How about the image optimization and yeah There are plug-ins which would optimize it for you So is there any other questions? I think you know, yeah, I have a lot. I have one question so at scroll back we use grunt to build things and You know having having some experience with that, you know with the grant file format. I really love what you know Does but I do have a question. I think you know the Because you guys are using streams this Does this mean that a plug-in cannot, you know Read files that run in a random order. I mean because you will be sending a stream of data You know and and each plug-in has to read and process that data in the same order in which it receives it So that does that you know other plugins that are possible in grant that are not possible in gulp because of this Actually, you know the order of processing is really up to you. How you when you want to where you want to pipe The stream to that plug-in you can decide it. Yeah, I mean my question is suppose I want to do five steps to a group of ten files Okay, now in grant each step of the process I mean step one might process file one first and then file three and then file two and then file ten and the next step might do It in a different order, you know, I'm talking the order between the files in case of gulp You know it they go, you know in a series one after another Yeah, I mean are there any disadvantages to that approach that you know I'm right now. I'm really not aware about that, but there there was something called, you know grant don't run which is deprecated so It was being misused so there are other ways of taking care of those kind of issues You know, they're still working on it actually. Okay. Thank you. Okay Next So I Not a question basically just to answer you I think gulp is basically got support for both buffered File reading as well as streaming file reading the plugins can choose to buffer stream data and then process it But basically there is no build tool which will satisfy all cases So it's always you'll find some corner cases. So for 80% of the case. I think gulp does Most of the things very easily