Gulp JS Crash Course to Setup in VSCode to Minify & Compile SASS in Node Express & Browser JS

uh hello guys welcome to this gulp crash course inside vs code and I will

actually show you what is gulp how why we use it inside our development gulp is

basically guys you may say it's a special library inside uh the

programming the world where you want to basically if you want to Minify your

JavaScript or compile the SAS into CSS or if you want to compress your code or

all these repetitive tasks that you want to perform inside your development Jour Journey can be handled by a library

called as gulp so there are very various Alternatives

also there grunt as well but I will be talking about gulp in this tutorial so you will see this is actually a project

that I have right here if you see we have this index. HTML file which is present inside this folder and now if I

run this gulp script which is run by simply this command npx G LP this is

actually the command right here which I'm writing right here so as you as I execute this command guys you will see

my CSS and the JavaScript will be minified concatenated and it will be created automatically you can see that

this is the style. men. CSS you can see the CSS is successfully white space is

removed and it is successfully minified and it it has been converted from SAS

and this is actually the JavaScript also being Mini ified compressed and you can see it is appearing on a single line

This improves the performance of your app so that's why we Minify the code

when we apply for production so inside this index. HTML we are applying this style do. CSS so style scripts. min.js

so if I try to open this file in the browser it will look something like this so the heading which is appearing in

green color so if I make any sort of changes so now there is this is the biggest region

why we use gulp you can see that as I make changes it will hot reload this is

my SAS file and it is actually being compiled to CSS by S by gulp this is if

I make any sort of change right here if I want to change this color from green to Let's suppose I pick a different

color so if I change this to this color so you will basically see again the

script will run automatically so when we make changes

automatically this script will run and now you can see that color of the text if you see the color of the text is

successfully changed and uh you can make any changes it you can see you can

change let's suppose if you want to add a style phone size if I make it larger

45 pixel so again it will run automatically hot reload and now my text

size have been increased so this is actually a SAS file if you see this is not a CSS file this is actually a SAS

file which has converted to CSS you can see that automatically so this is

actually a setup that you need to do guys in this tutorial I will show you the step bystep setup how to set up gulp

inside vs code and how to use it inside your JavaScript project and I will also show you how to integrate this inside

Express app as well in nodejs if you want if you are developing a nodejs Express backend API if you want to use

it how you can use it uh this is actually we using multiple SAS files so

this is you can see buttons s this is actually a button color if I change this

color let's suppose to any color so again this will run you can see

that and now if I open my style. CSS you will see the button color is whichever

color put I put right here it is there and if I show you the styles. main.css

this is actually the button color you can see button style is also there so we have multiple SAS files if you see in

different folders and we are actually concatenating both these SAS files into a single styles. min. CSS file so this

is actually the features of gulp it can be used to compress the size of SAS

files it can be compiled SAS to CSS JavaScript Minify it you can even reduce

the size of your images as well so if you're using images so if you know gulp has various plugins which is actually

allows you to uh do these task so in

gulp we basically assign some task so we have a specialized gulp file if you see

inside of a root project we have this gulpfile.js inside this file we assign

different task related to this is actually the task which will actually clean the CSS this is a task which is

assigned to clean the JavaScript this task will compile the SAS to CSS and this will Minify the CSS this will

Minify the JavaScript this will actually watch for any changes that you make inside your application this gulp script

will once again run these task so by default this task will when we run this

command if you simply run this command npx gulp this is when you run this

command uh this executes this line executes line number 60 so by default

this will run and it will run all these task that we have defined right here if you see so it will actually Define all

these task the ordering is important so whichever task is actually mentioned first will be executed first and then we

will execute the rest of the task so at last if you see it has it is watching

for the changes if you make any sort of change it will reexecute so coming back

to the JavaScript you will see actually we have this s simple console lock statements High called second statement

and if you see our minified JavaScript you can see everything is there on a single line at is compressed and if I

show you the inspect element you will basically see all these statements are appearing in the browser let's suppose

if I make any sort of change I add a alert statement right

here so you will basically see it will hot re reload you will see that

so now let's get started guys how to implement or configure gulp inside the

project so I will actually close this and start from scratch so I will here in

my projects directory I will simply make a new directory I will call this as G

project 2 and open it inside vs code so you will basically see we are actually starting

it from scratch let me just navigate to the folder

so you can see we are starting it from scratch nothing is present so first of all we do need to define the

package.json file by npm inate Dy this will create the package.json file then

we need to install the gulp dependency and uh as a Dev dependency so

just add this flag npmi gulp G lp--

save-dev so simply execute this command and it will install this dependency as a

Dev dependency and then we do need to install some plugins which actually gulp

third party plugins which allows you to carry out these functionalities of compiling SAS to CSS or minifying the

code or concatenating different files into a single file so for that we have

different plugins out there and you can even go to the gulp official documentation and there you will see the

plug-in section you can actually explore multiple plugins so you can see almost

4,325 plugins are there so one such plugin is gulp SAS which actually

compiles your SAS to CSS so you can see 348,000 weekly downloads so we will

install this so npmi GP SAS and one such plugin is for

concatenating GP concat and also in the same way we do

have a plugin to actually clean the wh space g lp- clean and also we have to if

you want to compress or Minify your files we have gulp ugly FY ugli fi this

is a basically a plug-in which will Minify all your files this will be for cleaning the white space which is

present in the files this is for concatenating or joining or merging multiple files this is for compiling the

SAS to CSS so these are four different plugins out there so simply sorry we

need to just add D- Sev so it will be installed as a Dev

dependency so these are different plugins out there so once installed it will be mentioned inside so we are using

the latest version of gulp which is 5.0.0 and my nodejs version is also the

latest one if if I just show you so my nodejs version is 20.9 point0 so you can

just just cross check your node version and gulp version as well so at the time of recording this video we are using the

latest version so now let's get started for the very first thing we need to Define is the gulp file so whenever you

are working with gulp you need to Define this file gulpfile.js so the icon will also change

in vs code if you see it will recognize that it's a gulp file and here you will actually Define the configuration code

for your gulp task so right in this file first of all

we do need to require the gulp package right at the very

top and then we also need to import the SAS which is a Gul uh plugin for

actually compiling the SAS into CSS and here also guys one other dependency I

forgot to tell you we do need to require the

SAS package s a s so simply install this package as well npmi D- sa Dev SAS

Library this is required if you want to compile your SAS into CSS so that's all

we do need to require it as well right here just write here require

SAS so after this we also need to import the buil-in path module as well of

nodejs and let me just import all these dependencies clean CSS so I think we

haven't installed this so gulp clean CSS is actually required to actually create

the white space which is present inside the CSS file so gulp clean CSS this is

actually the plugin gulp clean CSS so also install this also so once installed

we can import this gulp scle CSS and also we need to import the ugly file plugin of gulp gulp ugly

file and then we also need to import the concat plugin which is used to

concatenate multiple files G concat and then we also need to

import the gulp clean plugin so this is required for all other files such as

JavaScript if you want to clear the white space this is just a configuration

code guys once I written this code I will show you how it works and how so

just need to write as I'm writing so now we need to actually configure the paths of the

files so before configuring this you need to create a disc folder so this

disc folder we will actually be having our production files so here I will Define my index for HTML so here you can

write your HTML code whatever you need to basically let me just say gulp basic

example so here uh what I will do I will have this link tack which will

be having redirect we will be including the style. min. CSS which will be compiled by gulp

similarly we will have the script tag and it will be coming from the script.

min.js so for those we need to create the folders just create a CSS folder and

the JavaScript folder so the folder will be empty by default so gulp will

actually run the task and all these minified CSS and minified JavaScript will be automatically be compiled and

stored inside these folders and then we will run the file so here in the HTML we can actually Define a

heading hello world and let me that's solve and then we will simply have a

button we will simply say

uh I I will say click me this is all that is there in the HTML

very simple HTML document you can open it so now nothing works because we

haven't configured the gulp right now we have just defined our production files

and here we need to define the source directory guys where you will be actually be storing your C SAS files and

the Javascript file we will be writing so just create a folder of

SAS will just create

suppose just first of all create a file just random file let's create the folder

for SAS and then the second folder for JavaScript now I can delete that

file so here in the JavaScript we will simply be saying script.js and in the

SAS we will be defining style. SAS so here we can actually be defining our

simple JavaScript whatever you want to do this JavaScript will be compiled by

gulp so here we can have some bunch of allert statements let me bind

a event handler to the button

so you can see we have defined an ID here let me just uh see if we are defined so just give it an ID here to

the button that's all so in the JavaScript we are

targeting the button by its ID and actually defining alert when we click the button that's all this is our

JavaScript coming back to the SAS file so in the SAS file we can basically Define some SAS so we can actually have

a variable right here of uh primary color and we can Define this

variable to be so variables are defined by not this symbol this symbol you can

define a actually a color right

here and then in the body we can use this color background color

that's all and uh you can Define phone size to

be 15 sorry 45 pixel and here we can actually be

targeting The Heading and just align this heading in the center position that's all for now these are the Styles

which we have defined in the SAS file if you see you can even have a complex SAS file depends upon you this is I'm just

an example that I'm showing you this is the s file this is now the Javascript file now coming back to the gulp file

here we need to Define all the paths for the gulp to actually run so

here you'll Define this array it will actually contains four properties this will not be an array this will be an

object the first property will be in this object will be the SAS file so

where is it is located so it is located in the source directory do/ source and

it is present in the SAS directory

and here this is actually a wild card guys so this simply means that all the files which are present in subd

directories so this folder can can have let me call this I call this as s a s so

it can have as many subdirectories as possible so this wild card is is

basically saying that it can have subd directories as well so star star and

then we only need to Target the files which actually end with SAS files that's

all this is put a comma and then the actual location where it needs to

compile so we need to actually compile it to this disc folder and the CSS

that's all the file name will automatically be taken care of so let's

suppose if the input file is style. SAS then uh automatically gulp will actually

output style. main. CSS so we don't need to

write the output file name in the in the uh destination it will automatically

taken care of similarly for the JavaScript it will actually be saying it

is located in the source directory in the JavaScript folder and we use the

same pattern right here and the destination where you need to save it we need to save it in the disc folder in

the JavaScript folder folder that's all again we are not providing the file name it will automatically taken care by gulp

that's all uh for the paths now we need to Define some task so basically task in

gulp is generally what to do so they are simp simple lines of code

which actually defines what to do so we can define a task in G by using the task method and here you need to give the

name of the task you can Define any name of your choice so the first task I will Define is to clean the CSS clean the

white space which is present in the CSS so this actually will use the method

gulp do source so what here we need to provide the location of the file so it is located in the path. joint here we

using the object here paths.

CSS like this so we are actually taking the this object we have have basically

saying that uh where you need to save this file you need to save this

file in this location so we are actually targeting this and

then here we need to provide the so all the files which are ending

with CSS so clean CSS actually means guys we are actually deleting the

previous file so that we can compile the new ones so that's meant by Clean not the white space we are actually deleting

the files then we actually need to pass an object as in the second parameter this

object takes two properties which is allow empty to be

true and read to be false we are not reading the file we are simply deleting it so that's why we need to put false

right here and then we have a pipe function

inside gulp we can use this pipe function and here we can use the plugin which is clean so this will actually

delete the previous file you define this we are coming it using gulp do clean plugin we are actually deleting that

file so clean. CSS so this we can do this for the same

thing for the JavaScript as well so what I can do we can simply repeat this for

the JavaScript so here we can Define the task clean JS and this will be paths or

JS this will will be for the JS that's

all the logic will remain the same but here now we are doing it a new task for the JavaScript for deleting the previous

JavaScript files that's fine and now the task here will be for

compiling SAS to

CSS sorry CSS so now we will simply say gulp

task and he can simply say

SAS and we can define a call back function so this task will actually compile the SAS to CSS and right here

we'll be providing the path of the file so it is present inside paths. SAS file

so inside this we need to use the pipe function as I already told you let me show you step by step

do pipe so here using a SAS plugin and it

actually contains some events so if any sort of error take place we can simply

Define it like this log it log error so if any error take place we can Define it

in the console if no error take place then we need to save this file at the destination so gulp do destination this

is the actual function which saves the file at that particular location so we have the location fast. CSS that's all

this is really simple guys we provide the input location output location and if any sort of error take place we log

the error in the console now we can actually run this task by Simply Having the default task gulp task we can Define

it default task like this so This runs basically a series of tasks we can

Define multiple task as well but for now we will only be running the SAS task as only so what it will do guys it will

actually compile this SAS code that is written inside style. SAS and it will create a new directory a new file in the

S CSS folder just you need to now execute this command npx gulp so if you execute this

command you will see on the left hand side it will compile the SAS into

CSS and now you can see that so it is starting the fall task that we defined

and then it is running this task SAS and it takes really small time and now you

can see the SAS has been converted to CSS all the styles that we

defined and if you check your file uh you will

see okay let me just move it in the index for let me

okay

CSS style dot CSS sorry style. CSS sorry this

creat style. CSS not style. min. CSS if you see that now the Styles have been

successfully applied so we can actually make any change in our SAS file let me choose a different color you will

see for this it will not automatically reload we need to actually run it for

run it again so again it will change you'll see the color will change to Green so this is not very good every

time we make a change we need to execute this command so for that we have a task

that we can Define in our Gul file so this task actually watches for the changes that you make similar to any

node modon that you have say so we can actually assign a task of watching the

changes like this and then then we have this call back function which actually watches for any changes that the user

makes to the any file so right here you can simply say watch for changes which

are happening in the S SAS file and then run this task run this

task which is SAS that's all so what this code does guys you will see you

have defined a watch task and it is watches for everything which is happening in this SAS file and then we

need to run this task once again so if you now execute this for the very you

need to now execute only once so you can see finished default okay we now need to do just add

this so whenever you define a new task we need to add this in the default task we adding it in the default task so if

you now run so if you now see now I can't

actually execute any other command so it is watching for the changes so now if I

make any sort of changes now the color is green if I try to actually change

this color to so you can see that automatically

it's it changes whenever we make changes it automatically runs this s TX you will

see that so this is really important thing guys we don't need to do

repetitive task again and again that's why use gulp in the background so you can actually use this command and run it

in the background while you are developing your projects locally this is really useful dependency it is not used

for production but it is only used for uh local environment when you developing your project it makes the things really

easy and now I will show you how you can do this thing for the JavaScript as

well so we can if you see the

style. CSS that we got it actually contains white space we we also need to

Minify this as well we only need to have little space you all so if you want to

Minify this there is a plugin that we can use so we defined this task right

here uh I think uh for minifying the thing we do

need to define a task for this so we can actually Define a task for minifying the

spaces wi space Minify CSS so inside this function what this

does it actually returns a function gulp source and here we need to define the

path. join past. CSS here we are actually targeting the style. CSS file

which is actually compiled from SAS now we need to actually remove the white

space so for removing the white space we can actually use the pipe operator and here we can actually use the plug-in

clean CSS that we imported so it will clean the white space which is there in the output file and we need to create it

in a new file so we need to use the concat plugin as well and here we'll be defining a new file which will be

created in the same folder by the name of

styles. main.css

it will be created in the same folder and then we need to Simply say gulp do

destination paths. CSS that's all so now this task guys it is f five

four lines of code in the first line we are providing the input file which is style. CSS which gets compiled from SAS

and then we actually remove the white Space by using this plugin clean CSS and then we concatenate

everything in a single file called as styles. min. CSS this file and then we

are simply saving it so if you now need to actually assign this we can after

compiling it we can simply assign the task Minify

CSS like this so if you now run this once

again so if you see now your style. CSS will have spaces but it has now created

a new file which is styles. min. CSS and it doesn't create it doesn't uh have

spaces it is all happening in the single line all the white space have been removed and minified and this also saves

a lot of time and efficiency because in production level applications you need

to have minification of your code so if you now check the code will remain

constant but if you check the view page source this is your style do okay we are not

loading the styles. main.css we just need to change it we need to load the

styles. min. CSS file so if you make this change the code

will remain the same but now if you check view page source so you can see that all your code is actually

minified so you can see that and we can also make any change right

here if I change this to Let's suppose so again it will run

automatically and uh uh I think this is not

running okay yeah this one uh whenever the file is changed here also you need

to add the task as well so whenever the file is changed we need to compile it

and then we need to also Minify it as well so Minify CSS so just add this task

once again right here as well so if you now

refresh and if I try to change this

color let me run this once again if you make lot of changes you need to restart

your gulp command so just make sure sure now if I change this uh let's suppose

this background color to now it automatically changes so you

can see that guys we can even change the color of the text let's suppose to

White so you can see that so now we will actually be doing the same thing for the JavaScript as well you can see the

JavaScript is not executing because we haven't done that so in the gulp file we

need we need to define the jav JavaScript as well

now for the JavaScript we just need to Minify it so we will Define the same

task for the JavaScript as well which is Minify

JS so here we can actually Define the same things gulp do

Source paths. JS source and

then for actually minifying the JavaScript we do have a plug-in which we installed it earlier which is called as

ugly file ugly file will actually compress or Minify the JavaScript code

and then we need to Simply use the concat filter or Plugin to actually

store all this in a single file scripts. min.js and then we also need to save

this location so gulp do destination pass. JS destination that's all

the spelling of minifi is m i n i fi sorry minifi JS so we have defined this

everything now we do need to add this to

the right here in the watch filter and also in the default filter as

well Minify GS and here also

Minify

JS so if you refresh your application for this you need to restart

this if you see in the JS folder this script is created scripts. min.js and it

is actually all the code in the JavaScript has been compressed and it is appearing on a single line you will see

that so in the index.html we are actually loading this uh sorry this

needs to be scripts just make sure and now you can see your alert statement is all working

properly if I click the button click me you will see Hello World so all the code

guys you'll see it is working the console log statements is also working so you can make any change now in the

jav JavaScript as well let's suppose you just need you don't need to open the dis folder simply open the development

folder in the source folder you can modify the SAS you can modify the JavaScript and gulp will automatically

run in the background and it will make sure that your all the changes have been taken place so you can see that

automatically hot reload functionality is there open your JavaScript if you want to remove this alert statement and

let's suppose if I want to change the test this is go this is John

from so now if you just need to refresh

it okay if you see uh the previous JavaScript is if I change the JavaScript

it is not working this is because guys we haven't added the clean JS and the clean CSS if you see we

have in the starting of the video we actually added these two task which is clean CSS and the clean JavaScript so

this is actually used if you want to clean JavaScript if you want to make changes if you in the JavaScript it

should reflect that's why we also need to at the very top we can assign this clean

CSS and clean JavaScript so this will automatically be

running because if you you make any sort of changes in CSS and JavaScript it will automatically delete the previous files

and then it will create new files with the new newly changes that you have made just add this and similarly add this as

well right here as well whenever you make changes these two

tasks will be running first of all it will delete the previous files and just create new

ones so for that you need to refresh your gulp npx

sculp so it is saying that clean GS path argument must be of type

string okay I think let me see

clean PA

thought okay just need to be paths. JS destination sorry just make

sure and this is this will be uh star

min. so we are targeting the minified file so we need to delete the minified file so that's why all the files

starting from min.js and I think we do need to do it for the CSS as

well yeah I think for the CSS okay okay

for the CSS it's correct but for the JavaScript it was creating

problem so run the gulp file and now if you see you will see this alert

statement this is John and now if I show you if I make

changes in the JavaScript as well just don't open the this folder

just if I make changes

so it will now

execute uh I think uh I made some typ of mistake right

here if I change the JavaScript right here

here and also for the SAS if I show you basically if I make a another file let's

suppose a button file in SAS you can have multiple files as well if you know we can actually have

various styles for our different components so you have a button component right here we can actually

Define a button color let's suppose to be

FFF and then we can actually have a button selector we can change the background color of the button to

be like this and now we can actually import this in the base CSS file so we

can use a statement called as

import sorry add theate symbol for the import we need to import the button

Style so if you do this now it will also

compile this as well so once you do this if you see the dis folder now it in the CSS folder

it has actually created a button folder automatically and inside the button folder we have the button. CSS so this

is actually the styles for the button but now in the minifi file if you see you get actually concatenate each and

everything in a single file so if you see the output file the button

color so we actually targeted the button color

which is actually this color which is I think it's a white color so I need to

change this color let's suppose

uh button color

uh to the same color let's

suppose so as I make this change you will see in the Styles or mins or css it will the button color is changed so now

you can see that we can have different components gulp will automatically do this for us you can add multiple

components in SAS as well and similarly in the JavaScript as well you can

actually add some more JavaScript ad and then it will compile it in a single file

single Javascript file script. main do this is actual crash course guys about

gulp you can actually explore more about gulp by visiting their website and

documentation it's a very good tool and it has a lot of plugins available for carrying out the small little task and

if you want to integrate this inside a express application as well you can just

have a index.js file just create the basic Express server if you do need to

integrate that just create a new Express app start this app on P 5000 and just

you need to load the file

server is lisening on Port

5,000 then we can make this directory static directory as

static that's all so we just need to install the Express package so now just

open a new terminal so just install npm Express so

it will install the Express package so you can now run the

application nodeb index.js it will start this application on port number 5,000 you can directly open it Local

Host 5000 so the same thing will also happen

in the nodejs express app as well you can see that so again if you make any sort of

changes inside your

SAS if you change the background color automatically it will run you'll see

that in both the scenarios the if you're running it in a browser or in in a

Express environment in a back end both the environments will work with gulp so this is the actual crash CES guys of

gulp how to actually do

the these things so thank you very much guys for watching this video and uh I

will be seeing you in the next please hit that like button subscribe the channel as well