I would say browserSync here and then for the browserSync,
I would say configure a task inside.
Now, this is the syntax that we use for putting in
the configuration inside our grunt file.
So it says browserSync dev.
Now, if you ask me why,
we just need to read the documentation,
for each one of those plug-ins and then figure out how to configure those plug-ins.
So, I have already read the documentation and I have figured out
some basic setup for each of these tasks so that's why I'm just typing them in.
Obviously if you want more flexibility,
you may wish to read the corresponding documentation and then figure out
other ways of configuring these tasks.
My configuration here is just one way of addressing or solving the problems.
So here I specify the bsFiles,
so this file specify which files need to be watched for
by my browserSync and then when any of these files change,
then my browserSync will cause the browser to be reloaded.
So I'm going to watch all the files in my CSS folder,
HTML files in my project folder,
and then all my JavaScript files in the JS folder.
So, with this I have configured all those files on which I'm going to keep a watch,
and then automatically cause a reload of my page when required.
And then, the next configuration that I need to
do is some more options, for my browserSync.
So the options that I'm going to specify is,
watchTask true, meaning that there is a watchTask running,
and the base directory for my server.
So I say baseDir,
and then I specify, dot slash.
So the current directory,
as my base directory.
So with these changes,
let me save the changes to my grunt file,
and then I'll go down below and then configure another grunt task, here called default.
So, I would specify the task as default.
For this default task, what do I need to do?
I need to execute
browserSync and also second task that I'm going to do is watch.
I will have to do the browserSync task first and then the watchTask later.
Because the browserSync task will start serving up my server.
If I do the watchTask first and the browserSync task later,
the watchTask will basically,
stop everything and then all the remaining tasks behind that will not execute.
So if you are using the watchTask,
do that as a last one in the sequence that you specify in this square brackets.
With this, my project is now configured,
to both keep a watch on my SASS files and serve it up whenever required.
So, this completes my grunt file,
let's go back to our terminal.
Going back to my terminal,
I've opened another tab and then in this tab,
I'm going to run the grunt task,
which will also be keeping my browserSync running and will serve up
files and automatically reload the web page,
if any of those files change.
So if you configure a task as a default task as we did in the exercise,
then at the prompt,
I just need to type grunt and then it'll automatically execute the default task.
Once my grunt tasks starts running,
you can see that it has started the browserSync and it is serving up
the files and also it is running the watchTask,
which is waiting for any changes to automatically run the SCSS task.
To demonstrate to you how the SCSS task will be triggered,
whenever I make any changes to my styles.SCSS file,
so I brought up the styles.SCSS file,
and I'm just simply going to save this file.
And then you will notice that immediately,
on the left side the SASS task is invoked and runs and then re-compiles and this
also will cause the styles.SCSS file to be changed, after being recompiled.
Then this will trigger the browserSync to automatically reload my web page.
With this, we complete our grunt part one exercise.
This is a good time to save your files,
to the Git Repository with the message Grunt part one.