Now that we have granted enough, it's time to Gulp. We'll try to perform the same kind of tasks that we've performed with both NPM Scripts and Grunt, but now we'll try to do the same using Gulp and Gulp Plug-ins. To get started, let's first install Gulp as a global module. So, to do that, at the prompt, type npm -g install gulp, this will install Gulp as a global module and make it available for use on the command line. After we complete this, the next step is to install Gulp locally in our project. So to do that, at the prompt, type npm install gulp --save-dev. Once we have completed these two, it's time to go ahead and configure our Gulp tasks. Before we do that, our next step, we will install the Gulp Sass plug-in so that we can configure the Sass to see as conversion task in our Gulp file. So, to go ahead and do that, type npm install gulp sass --save-dev. Also while we're at it, we might as well install the Browser Sync Gulp Task too, so that we can configure both this one after another. So, I'll install, npm install browser-sync --save-dev. Once these two are installed, then let's go ahead and create our Gulp file and then configure our Gulp Tasks here. Going to our project folder, let's create a new file and then name it gulpfile.js, and in this file, we're going to configure our Gulp Tasks. So, once the gulpfile.js is ready, well configure the Gulp Tasks here by first beginning with 'use strict' and then var gulp. So, we need to require the gulp node modules, and also while we're at it, we'll require the sass node module. As I mentioned in the previous exercise, it will become more clearer to you why the code is written like this, once you understand more about node modules in a later course. browserSync, so what we have done is to include the Gulp Contrast and bowserSync node modules into our Gulp file. And once you have done that, it is time to configure our Gulp Tasks. As we learnt previously, Gulp is a code-based on way of configuring tasks unlike Grunt which relies more on configuration of the tasks. So, in case of Gulp, the baby will set up our tasks to type gulp.task and then let's set up a task name 'sass', and then for this task, we'll set this up as a function, and this is how the code is prepared. So, Gulp Tasks Sass function and in here, we are setting up the Gulp Tasks, so we'll type return gulp.src('./css/*.scss') As we learnt, Gulp is a tool-based around code over configuration. So, we'll prepare this task as such. So, you see that we have specified Gulp source pipe sass on, and then here, error. So, if an error occurs, we'll use the Sass way to log the error and then pipe this through gulp.dest('./css'), and that completes the configuration of the Gulp Sass Tasks. You must be wondering why we write the code like this. It says gulp source and then specify something there, and then the next one says pipe and then the next one says pipe. Let's understand the Gulp way of doing things in a little more detail. To help explain why we configure Tasks like that, I have an explanation of what we call Gulp Streams. The way Gulp works is like you take a set of files and you specify the set of files by saying gulp source as we did with the Sass Tasks there. So here, this is the function that takes the files. You could even specify the files using the globbing patterns that we learnt in Grunt, and then it creates a stream of objects that represents these files. Now, once the stream is created, then the stream can be piped through a set of functions one after another in order to transform these files. And then finally, the resulting transformed files can be put into a destination location. So that's why we specify Gulp source, then we specify pipe. So, the pipe allows the stream to be piped through a function, and so, that's why we said dot pipe, and then we said gulp. And then we said sass on error. And then the next one says Pipe Gulp Dest. And so, the gulp dest specifies the destination of the files that have been processed. So, that's how a typical task is specified in gulp because but gulp operates on streams. So, your stream files through the pipes until they are transferred and then they will be deposited at specified destination. So, you will see similar structure for many of the gulp tasks that we would configure in this exercise and the next exercise. Now that you have understood a little bit about how gulp works with streams and how the gulp task uses the pipe to process files through a set of function, and it becomes more clear to you why we set up this sass task as seen in this code here. The next task that we are going to configure is called gulp, and we'll configure this task as sass watch. So, this is a watch task that we are going to configure, and then you would specify function. And so in here, the gulp sass watch task, what we do is specify the files that we're going to be watching. So, we use the gulp watch task to watch the file. So, the watch is already built into gulp. So, it will take gulp watch and then we specify the files there *.SCSS. So, as you can see, the gulp watch will watch these files and then when any changes to these files occur, then it'll run that sass task, which we have specified earlier. So, that's how that sass watch task is set up. Now that we have done these two, let's set up that browser sync task next. So, close that with the semicolon and then the next task that we will set up is the browser sync task. So, I will specify browser sync task there. And then for the browser sync task, I will specify that function. Again, note the structure in which we write the code, gulp task and then you specify something that followed but with a function. Now again as I said, we learn node modules in the last course of this specialization, it'll become more clearer to you why not modules written with this structure, and why the functions are written like this. So, we say gulp task browser sync. Here, I'm going to define a variable, a JavaScript variable called files, which is nothing but in array, and that inside those files array I would specify all the files that if modified the browser sync needs to cause the reloading or the file. So, html files, the CSS files in the CSS folder, and then similarly I will also watch the image files, and the JavaScript files. All these files if any of them change. So, after this, I will configure the browser sync here. So, I will say browser sync. We have already defined this variable called browser sync earlier. So, we have to initialize the browser sync, and so, the first parameter to that is the files that will need to be watched, and then the second parameter specifies the options that we are giving to the browser. So, the option that I'm specifying is for the server. I will specify the base directory as the current directory, and then that completes the specification of the browser sync task. So, with this, we have completed specifying the browser sync task here. So, you can see that how we configured browser sync task, we specified the files and then save browser sync in it and supply the files as the first parameter. The second parameter is the options for the browser sync plugin. Then finally, we'll schedule or we'll configure the task called default. Just like me have the default task in Grunt, we can also have a similar default task defined for gulp. So, here we say gulp task default browser sync, and then specify function. And inside there we'll specify gulp start. So, this specifies that I should start this other task that sass watch task.The sass watch task needs to be started. Make sure that the browser sync task is running before the sass watch task is started. So, this is the syntax for specifying that in gulp. So, with this, we have configured everything that we need in gulp file. So, again going back, there are steps that we did. We first used require to include all their gulp plugins there, then we configured the sass task, and then specified sass watch task. This is where we use the gulp watch that is available to us like from gulp. Then we specified the browser sync task and then finally reschedule the default task with the browser Sync and the gulp start with sass watch. Now, let's see the changes, and then we'll go ahead and execute the gulp file add, and the prompt type gulp. You will see that gulp starts up with browser sync and the sass watch task starting up, and then your browser sync will start serving up the files. If you view your website using a browser, you will be able to see the website being served up in the browser. Let me also illustrate the functioning of the watch task. So, I will pull up the style.css and just try to save the change and you will notice that on the left side, the sass task is immediately invoked and it will recompile the style.scss file into the CSS files. And then that browser will reload at this point. With this we complete the first part of the gulp exercise. In the second part, we will prepare the distribution folder. This is a good time for you to do a git-commit with the message Gulp part 1.
