Up next in 10
Grunt Crash Course to Setup in VSCode to Minify & Compile SCSS to CSS and JS in Node & Express & JS
Jan 9, 2025
Buy the full source code of application here:
Show More Show Less View Video Transcript
0:00
uh hello guys welcome to this video so
0:02
in this video we will be looking at
0:05
another uh Library which is called as
0:07
grunt grunt allows you to actually do
0:10
the same task of gulp which we discussed
0:12
in the last video so grunt is also very
0:15
popular among developer community so it
0:18
is used to actually compile your assets
0:21
such as you return your SAS files if you
0:24
see style. SAS files into CSS you can
0:26
Minify your JavaScript files this is you
0:29
can see script.
0:30
and you can actually remove the white
0:32
space you can perform all these
0:35
operations in the background while you
0:36
are developing your project so basically
0:39
I will take this example and we actually
0:42
let me for show you a demo of this so
0:45
let me delete
0:47
everything so this is actually our disc
0:50
file and uh you will actually see if I
0:54
run my grun command in the command
0:57
line so this is our grun Command and and
1:00
this is my disc folder this is the
1:02
source folder where I am just writing my
1:05
basic JavaScript code so this is
1:07
actually a JavaScript code that we
1:08
written this is actually the SAS file
1:11
which actually contains multiple files
1:13
if you see it is a base file this 10
1:16
this is a button SAS file and it will be
1:19
compiled into a single CSS file and also
1:22
it will be compiled into a single
1:24
Javascript file minified file so now let
1:26
me you just need to say grunt GR NT this
1:31
is actually the name of the library
1:33
simply install this uh just execute this
1:36
command and you will see on the left
1:38
hand side it will create all these files
1:41
in the CSS folder it will create this
1:43
style.css style.css map file as well
1:47
which is very useful and what this you
1:49
can see style. main.css it has compiled
1:52
the SAS file into minified CSS it has
1:54
removed the white space as well
1:57
similarly it has minified the JavaScript
1:59
code AS as well and also minifi that as
2:02
well so now you can open it so the nice
2:07
thing about this thing it is similar to
2:10
gulp gulp also Auto refreshes as you
2:13
change now your SAS code while you're
2:15
developing if you let's suppose if I
2:17
change my background color so once again
2:21
it will detect this change and it will
2:23
once again run this and you will see hot
2:25
Auto reload this is really useful guys
2:28
and if you basically have used gulp
2:31
before it is just a similar to gulp we
2:35
discussed gulp in the last video now we
2:37
will be discussing another which is a
2:40
grunt it's again a task Runner which act
2:43
automatically does this repetitive task
2:46
for us in the background so it's a
2:48
JavaScript task Runner it's really
2:51
popular and uh first of all now to get
2:54
started you do need to install its
2:56
command line solution inside your system
2:59
so there is a command that you need to
3:00
follow npmi dasg for Global and then
3:04
just say grunt Das CLI so install this
3:08
by using this command npmi DG for Global
3:11
and then install this grunt. CLI this
3:14
will actually allows you to execute
3:16
grunt scripts right from your command
3:19
line so I've already installed it so
3:22
this will hardly Take 5 to 10 seconds
3:25
and now we will actually move to our
3:26
project so I will say create a new
3:29
directory
3:31
grun
3:34
project and open it inside VSS code so
3:37
it will be configuring it from scratch
3:39
so first of all you need to create a
3:41
package.json file and PM in it- y so
3:45
after this we need to
3:47
install the dependencies which is npmi
3:51
grun Gru n which is actually the base
3:54
library grun and then we these are this
3:59
Library also contains some plugins and
4:01
packages for handling the minification
4:04
the compiling of SAS into CSS for
4:06
removing white space all these third
4:09
party packages are there similar to gulp
4:12
so one such package is Grant contrib
4:15
clean this is for cleaning the files or
4:18
deleting the old files this package is
4:20
responsible and then we have the second
4:23
package grunt contri CSS Min so this is
4:29
this package allows allows you to Minify
4:30
the CSS white space and Minify the CSS
4:34
files next one is grun
4:38
contri SAS so this actually allows you
4:41
to compile your SAS files into CSS this
4:46
package and uh just you need to install
4:51
it using a Dev dependency because these
4:54
dependencies are not required for
4:56
production that's why we put this flag
4:58
it is only needed for development while
5:00
you developing your application so this
5:02
actually makes the development
5:04
experience far more easier so once it
5:07
installs it actually makes inside your
5:10
Dev
5:11
dependencies section so it will be
5:13
created you can see that we are using
5:16
the latest version of grun all these we
5:19
are if you see our node version which is
5:21
20.9 point0 so we are using the latest
5:24
versions in this tutorial so now to get
5:27
started we just need to create a grun
5:30
file in gulp we actually created this
5:33
file gulp but now in grunt we have we
5:36
need to create the file grunt file GS
5:39
you can see the icon of grunt it will
5:42
detect by V
5:44
VSS vs code now inside this file guys we
5:47
just need to actually register plugins
5:52
so it is slightly different as we did in
5:54
gulp grunt has to offer a function which
5:58
is actually say module exports this call
6:01
back function inside this we will
6:03
actually write the configuration code
6:04
for
6:05
Grunt and here you will actually
6:08
configure everything in this function so
6:12
here grunt actually contains a function
6:15
called as init config this function
6:18
initializes the configuration and here
6:21
we need to pass an object so one such
6:23
object we need to pass is the different
6:25
paths so it will actually contain all
6:28
the direct three parts where you will be
6:30
storing your output and input file so
6:34
for this first of all we need to create
6:36
a directory structure we need a dis
6:38
directory where will be it will be the
6:40
output directory which will be for the
6:43
production code and the second directory
6:45
will be for where we will be writing the
6:48
code so this will be the source
6:50
directory and inside source directory uh
6:53
we will actually have the folders for
6:56
CSS and the SAS so we will be having the
6:59
SAS folder similarly you'll be having
7:01
the JavaScript folder and now in the dis
7:05
folder we will actually have our index
7:07
HTML file and similarly we'll have this
7:10
folder for output CSS which will contain
7:13
the minified CSS and similarly for the
7:15
JS it will contain the minified
7:18
JavaScript code so right here we can
7:20
simply create a simple file and we'll
7:22
say Grant grun example you can even
7:25
create an Express server as well I will
7:28
show you later on how to include that so
7:30
here you can simply include the
7:36
file which will be coming so we can call
7:38
this as script.
7:40
min.js and then we can say
7:45
similarly style. main.css so that's all
7:51
so by default no files are present so
7:53
whenever grun executes it will create
7:55
these files automatically for us so now
7:57
we can simply have a simple HTML file
8:00
right here we can have a heading this is
8:04
a
8:05
heading and a simple button click
8:09
me so that's all this is all that we
8:12
need have the index of HTML I'm just
8:14
showing you an example so now for the
8:18
SAS file we can simply create a basic
8:20
file right here in the SAS
8:25
directory script.
8:27
SS and here we can have some more uh
8:31
let's suppose we have different files
8:32
for SAS you can even compile different
8:35
files into a single minified file as
8:38
well so this is this will contain the
8:40
styles for button and this will be the
8:43
base file so I have some code right here
8:46
sample code that I can use so I can
8:50
simply paste it right here this will be
8:52
the button style we have defined a
8:54
button color variable and we are
8:56
assigning the background color of the
8:57
button and in the base Style we
9:02
need I'm just pasting some sample code
9:05
so we are importing that button style
9:07
that we Define in the button. SAS file
9:09
we are importing that in the base SAS
9:13
file so now we need to compile this file
9:15
so
9:16
now similarly we can write a basic
9:20
JavaScript in the
9:23
script.js so I can simply to save time I
9:26
can simply paste that you can write any
9:29
Java script that you are developing this
9:31
is just an
9:32
example so now we've come to the grun
9:35
file so here we need to Define all these
9:37
paths that we configured so here we will
9:40
Define the first of all the SAS file
9:44
where it is stored so it is stored
9:46
inside
9:48
our source directory and it is actually
9:51
present in the SAS folder and this is
9:54
actually a wild card pattern that we are
9:56
using this simply means that basically
9:59
cover all the files which are ending
10:01
with the SAS directory this is extension
10:06
so this two stars actually say that it
10:09
can be this SAS directory can have
10:13
unlimited subd directories as well so it
10:15
will also takeen this file as well
10:18
so like this so in this way you can
10:21
handle multiple directories multiple
10:23
subdirectories as well which contain
10:24
these SAS files similarly we will have
10:27
the CSS where where we need to put the
10:31
output so we need to put the output in
10:33
the dis
10:34
directory and uh we need to have is put
10:37
this inside the CSS directory that we
10:39
created which is currently empty so
10:42
similarly we will have the JS Source
10:44
directory as well here you'll put the
10:46
path it is stored inside source like
10:50
this and similarly for the destination
10:52
we will simply
10:56
say it is present
11:00
you need to put this in the disc and JS
11:02
that's all so we have configured all
11:04
these paths and now after doing this we
11:08
now need
11:09
to uh after it
11:12
completes this object we need to do this
11:15
inside this grunt init config so here we
11:19
will actually Define some operations
11:21
similar to gulp so here we'll be
11:24
defining some task and operations first
11:28
task here will be to actually compile
11:30
the SAS file so I will say
11:35
SAS and uh you can call this anything
11:37
but I'm just calling let me call this
11:40
SAS this will be actually an object and
11:44
here we simply saying
11:46
disc
11:50
files okay this needs to be called as
11:53
SAS not s this need to be called as SAS
11:57
I think
12:00
yeah so I think the spelling here is
12:03
okay okay sorry after this you need to
12:05
put a comma that's why this was a
12:12
problem just put a comma after you
12:14
define that object and now inside the
12:17
files we actually we need to Define an
12:20
object and it will have these properties
12:22
expand to True like this so these are
12:26
different properties out there expand
12:29
it is slightly complicated guys as
12:31
compared to gulp gulp was relatively
12:33
easy but in grunt we need to perform
12:36
these operations and uh you need to
12:38
Define these current working directory
12:41
which is actually present inside paths.
12:43
you can see we are providing this object
12:45
property so here we are providing the
12:47
current working directory which is this
12:49
the source directory the destination
12:52
directory and the extension. CSS so we
12:55
do need to provide this after we do this
12:57
we again need to put a comma so this is
13:00
outside this uh if you
13:04
see I this is outside this uh init
13:09
config so init
13:11
config okay all this code that we are
13:14
writing we are writing it inside this
13:16
init config so this completes this
13:18
object that we written you can see that
13:21
now outside this now after we do this we
13:26
can actually register this so if you
13:29
want to register this you can actually
13:32
do outside this init config what we can
13:38
do if you want to register this
13:44
operation so here we can do this inside
13:47
grunt so first of all you do need to
13:49
load all these packages because we are
13:52
using this packages so in this way you
13:54
can load these packages by using this
13:56
function load npm task
14:00
and we need to require for this grun
14:05
contri SAS plugin so we are requiring
14:08
this
14:09
plugin and now to actually register this
14:12
task we can simply use this function
14:15
grunt. register task this is actual
14:19
function available in Grunt and we will
14:21
be assigning it to the default task and
14:24
inside this array we can Define the
14:26
operations so at this moment we have
14:29
defined only one operation which is
14:31
called as SAS we can Define this
14:33
operation like
14:34
this so now if you want to run this it's
14:37
very easy you come to the command line
14:40
and simply run the file you say gr andt
14:46
so as you run this command it will
14:48
actually run run it is saying that task
14:51
SC CS not
14:54
found okay let me see what is the
14:57
problem s
15:02
C uh SC
15:07
CS okay let me change the name s a
15:12
s okay s a s
15:16
sorry s a
15:27
s so now I can see that the task is done
15:30
and if you see the CSS folder I
15:34
think it has compiled this I think the
15:38
task has been
15:45
completed okay we do need to write more
15:48
task as
15:51
well okay let me just
15:55
basically also do this CSS Min as well
16:00
we haven't written this task so before
16:04
compiling it we also need to load this
16:08
which is
16:10
Grunt contri and CSS Min so first of all
16:14
we do need to Minify the CSS as well
16:16
before compiling it so we have actually
16:18
loaded this library now what we need to
16:26
do just after this we will Define
16:31
this which is I think is uh CSS men CSS
16:38
Min and this will be again an object and
16:41
it will actually
16:42
Target this
16:46
files again we are providing the same
16:49
properties expand true and here we are
16:51
providing the CSS file and then it is
16:54
targeting all the CSS files which are
16:56
present it will Minify it and create
16:58
create this extension m. CSS like
17:03
this so here also we are targeting the
17:07
files which are do
17:09
CSS like
17:13
this and now after you do this we do
17:15
need to add this as well so just write
17:17
this you can add
17:19
this which is
17:25
uh s a s s a
17:29
s
17:30
a s s a
17:33
s and then you need to also add this we
17:36
have Define this CSS
17:43
Min so if you run this now there will be
17:47
two task here which will be running it
17:49
is saying that uh no files
17:55
created uh let me see guys why the files
17:58
is not created
18:05
let me paste this code here first of all
18:08
and then check what is the
18:10
problem I think I made some kind of typo
18:20
mistake let me paste it
18:34
oh that's the problem sorry guys sorry I
18:38
basically figured out the error why it
18:40
is actually not doing this let me just
18:42
show you you can actually see the
18:45
directory which we called you can
18:48
directory SC CS we call this directory
18:52
as SC CS but here we are providing this
18:55
inside the paths if you see
19:00
uh if I show you just
19:10
see uh let me paste the previous code I
19:14
think the directory is correct if you
19:15
see SC CS so I think the directory is
19:20
correct so let me just paste the code
19:23
right here and cross check if it is
19:25
working
19:29
so we did the
19:31
uh so here it is actually assuming the
19:34
directory name to be s a s so what I
19:37
will do I will change this to
19:57
SCS okay let me see inside this current
20:01
working directory what we put we put the
20:04
current working directory
20:11
okay let me paste
20:14
it so let me
20:23
change let me close this and change this
20:26
name let me open
20:39
the grun project grun
20:47
project let me change this directory to
20:50
s a s
20:59
so now you can see the directory has
21:01
been changed to s a
21:03
s now if I run this
21:29
okay we haven't installed these plugins
21:31
ugly FY and
21:33
uh watch that's the problem which is
21:36
having so you can see we have already
21:39
only installed these plugins so what I
21:41
need to do I do need to install this
21:44
plugins as well for ugly FY is actually
21:46
used to actually Minify your code so
21:49
you'll say npm on
21:52
grunt ug L FY ugly this is actually the
21:57
plugin and then the second one will be
21:59
for watching the
22:01
changes if you make any sort of change
22:03
then it will be watching so grun contri
22:07
watch so these let me save it as a dep
22:12
dependency so install
22:18
this so now once again run the command
22:23
grunt so now you can see it will
22:26
actually make these uh minified files if
22:30
you see that script.
22:32
CSS script. min. CSS you can see that
22:36
all the
22:38
different files that we configured of
22:40
SAS it has been compiled to a single
22:43
minified CSS file and also the white
22:45
space is also been done so in the
22:49
JavaScript as well the minified code as
22:51
you can see all the code is minified if
22:53
I check my index.html file in the
22:56
browser
22:58
if I open this now I
23:02
think the directory name
23:06
is script main.css let me
23:16
check script m. CSS
23:30
so you can see that now the CSS have
23:34
been successfully applied so it now it
23:36
is actually watching these changes if
23:38
you see the script hasn't ended and it
23:41
is now running it in the background
23:43
watching for any sort of change that you
23:45
put it you can close this disc folder
23:47
while you're developing just open the
23:49
source folder as you're developing and
23:51
go to your SAS file and let's suppose if
23:54
I make any sort of change if I change
23:56
the color so once once again it will run
23:59
as I make this change and the it will
24:02
auto reload you can add as much
24:05
JavaScript as you want let's suppose if
24:07
I change the JavaScript if I add this
24:10
two alert
24:15
statements so once again it will auto
24:18
refresh and you can see
24:22
that if I click the
24:27
button Buton do add listener so we do
24:29
need to add
24:31
a
24:33
ID to the button I think we haven't
24:36
added this so ID button so if you make
24:39
this
24:43
change click the button and now you will
24:45
see the alert window so in this way all
24:49
this you can configure the grunt file
24:52
you need to create a gruntfile.js and
24:54
inside this file we Define these scripts
24:57
you first of all load all these plugins
24:59
by this function which is called as load
25:01
npm task and here you actually Define
25:04
all the plugins which you have installed
25:06
here
25:07
so this plugin is actually used to
25:10
actually delete the previous old files
25:13
when you make changes this is used for
25:15
compiling your SAS files this is used
25:17
for minifying the CSS this is used for
25:20
minifying the JavaScript and this is
25:22
used for checking the changes when you
25:24
make any sort of changes it actually
25:26
restarts the gra grun operation and here
25:30
we register by using the register task
25:32
function of grunt we register all these
25:34
plugins in the default one so first of
25:37
all we are clearing and then we are
25:38
compiling the SAS then we are minifying
25:40
the CSS then we are minifying the
25:42
JavaScript and then we are watching for
25:44
all the changes so these are all the
25:46
scripts which are actually taken place
25:48
at the same time and you can see it is
25:52
also running it in the background so all
25:55
these
25:56
task so in inside the watch script we
25:59
actually provide all this
26:03
plugins so whenever we make any sort of
26:06
changes in JavaScript we first of all
26:08
clean the previous files and then we
26:10
Minify it same goes for the CSS as well
26:14
we clean the previous files and then we
26:15
compile it to SAS and then we Minify the
26:18
CSS as
26:21
well this is for compiling or this is
26:24
ugy which is minifying the JavaScript
26:32
same goes here for CSS Min and SAS as
26:36
well so this is actually the
26:38
configuration file and you can even
26:40
actually
26:42
install if you don't want to create like
26:45
this index. HTML you can even create a
26:49
express application as well just create
26:51
a index.js file right here and we can
26:54
load this using Express
26:58
just make a new Express app lend this
27:03
application we can define a port
27:07
number 3,000 and we can just set this
27:11
static directory Express static disc
27:14
that's all so if you now run this
27:17
application in a
27:21
terminal just write node more
27:24
index.js so it will start your
27:26
application uh it is saying that Express
27:28
is not found so let me install this npmi
27:38
Express so it will start your express
27:41
application uh just nodeb index.js so if
27:46
you try to open now instead of directly
27:49
opening it you can open it inside Local
27:51
Host 3,000 if you see that now it is
27:54
express application running and it will
27:57
automat atically compile it whenever you
27:59
make changes if you
28:04
see if I go to the SAS
28:08
file let's suppose change the
28:14
color you can see that the color is
28:16
changed you will see it will
28:18
automatically compile the SAS it will
28:21
just create this you will see
28:24
that so this file will get updated
28:26
automatically so all the these files
28:28
will be generated every time when you
28:30
make a change using this grun file that
28:32
we configured so thank you very much for
28:34
watching this configuration tutorial
28:36
guys for grun it's a mini crash course
28:38
that I showed you step by step on how to
28:40
actually configure grun in vs studio and
28:42
also in nodejs Express and JavaScript
28:45
please hit that like button subscribe
28:46
the channel as well and I will be seeing
28:48
you in the next video
#Programming
#Software
#Computer Education