Up next in 10
Browserify + Gulp.js Automation Script to Compile JS Modules & SCSS to Single File in Browser
Jan 9, 2025
Browserify + Gulp.js Automation Script to Compile JS Modules & SCSS to Single File in Browser
Show More Show Less View Video Transcript
0:00
uh Hello friends welcome to this video
0:02
so in this video I will actually show
0:05
you how to compile your JavaScript and
0:10
SAS project which actually runs have
0:15
HTML code as well how to bundle
0:18
everything into a single file using Gulp
0:23
browserify and
0:25
uh we also will be using Babble in this
0:29
video
0:30
so all these three Technologies we will
0:32
be using in in bundle to actually bundle
0:37
everything this is actually the HTML
0:39
code this is high level JavaScript code
0:41
which contains ESX import statements
0:45
which we'll be using third party nodejs
0:47
modules and we will be using the SAS
0:49
code which is a CSS
0:52
pre-processor and you can see you have
0:54
declared these variables and we will try
0:56
to actually compile everything into a
0:58
single folder folder so we have actually
1:02
used a gulp which is used for automation
1:06
GP so we have the script right here
1:08
which will execute and it will actually
1:10
create a disc directory you can see it
1:13
has compiled everything into a dis disc
1:16
folder we have compiled the SAS into CSS
1:19
we have compiled the JavaScript code
1:22
into bundle.js which is actually a
1:24
minified code and all the JavaScript
1:27
code that we've written inside this
1:30
import statement it contains third party
1:33
nodejs module which is low Dash it is
1:35
converted into a bundle JS and we have
1:38
used browser f for this for actually
1:41
compiling everything into a single
1:43
Javascript file and this is actually the
1:45
index for HTML file we can directly open
1:48
it in the browser and you can just see
1:50
the code is executing it if you check in
1:53
the console you will
1:55
see uh lad Das package is perfectly
1:58
working it is splitting the array into
2:00
two pieces and then we have this console
2:02
log hello world statement so you can
2:04
just see the code is working and you can
2:07
even see the script is listening for any
2:10
sort of changes that you will make right
2:12
here so let's suppose if I change the
2:14
color the primary background color of
2:16
the body if I make this change
2:20
automatically if I make the
2:24
change you need to select whichever
2:27
color so as you change it
2:30
automatically the application will
2:32
refresh because it will after it he it
2:36
detect changes it will recompile the
2:38
project using browserify Gulp and
2:42
babble so your project will
2:46
automatically refresh so this is
2:48
actually the project you can
2:50
add JavaScript code if you add alert
2:53
statement once again it will
2:56
automatically refresh so for building
2:58
this we are using browser browser file
3:00
for compiling the JavaScript code into a
3:04
single bundle JS so this is actually the
3:07
library browser F lets you require
3:09
modules in the browser by bundling all
3:11
of your dependencies in a single file
3:14
so then we are using Babel for actually
3:18
converting your JavaScript into all the
3:21
browsers so that they can understand
3:23
older browsers as well so we are also
3:25
using Babble and also we are using gulp
3:28
gulp is actually used for
3:30
automation so it's a gulpjs is a toolkit
3:34
for automating JavaScript workflows so
3:38
we are using the technology so let's get
3:40
started so what I will do is that I will
3:43
CD
3:45
into I will simply make a new
3:55
directory I will CD into this and open
3:59
it inside vs code So currently the
4:02
directory is empty so we need to
4:05
initialize the package.json file with
4:07
the default options
4:09
so you can just see the package.json
4:12
file has been created now we need to
4:14
install some modules right here all
4:16
these modules will be Dev dependency so
4:18
we need to add this flag which is Dash
4:21
capital D and here we need to first of
4:23
all install
4:26
browsery which will be responsible for
4:29
compiling JavaScript we will also be
4:31
using gulp these are different plugins
4:34
out there for concatenating all the
4:36
files Gulp
4:41
concat and if you want to compile the
4:43
SAS there is a plugin out there which is
4:45
gulp
4:46
SAS we also need to install the base SAS
4:49
Library as
4:53
well and also we need to install venal
4:57
Source stream
5:00
so this package is also
5:02
required and we also need to install
5:05
Babel as well so atate Babel preset EnV
5:10
babelify
5:12
package as
5:14
well b a b l if FY babelify
5:20
uh also there is a package called as
5:23
gulp
5:24
browserify so it helps in uh using
5:29
browsery in with gulp so this is
5:32
actually the package gulp browser
5:35
file so these are all the packages which
5:38
are required simply install them so it
5:41
will list inside the dev dependency
5:48
section so in the meantime we can create
5:50
a source directory so here you will be
5:52
creating all the files which are
5:54
required
6:04
so here we will be
6:05
creating a inside the source directory
6:08
index.
6:09
HTML we will also be having folder for
6:13
SAS and then the folder for
6:18
JavaScript so now the
6:23
packages is installing so just wait so
6:26
now it is completed so all these
6:28
packages are L listed in inside dep
6:30
dependencies and uh now in the index.
6:33
HTML we will have a very basic HTML file
6:36
so I will say browser
6:39
f plus
6:42
sculp automation so inside this you will
6:46
have a simple heading hello
6:49
world and giving a button ID button so
6:53
you can say click me so we have basic
6:55
HTML file right here and in the SAS we
6:59
will actually create a file style. SAS
7:03
so what I will do I will just declare
7:05
some basic SAS right here
7:10
so decare these two variables
7:18
and so I will simply make the background
7:22
color to be the primary color
7:30
and the color to
7:32
be text color so I will simply make the
7:36
heading in the center
7:41
position this is a SAS and in
7:45
the
7:47
index.js we
7:50
will try to use a third party module of
7:52
nodejs which is low Dash l o d a
7:56
s
7:58
so now
7:59
actually import this we will use the
8:01
import
8:03
statement so it actually contains a
8:06
method low
8:07
Dash so here you can divide your
8:11
array into
8:13
two this is actually the high level
8:16
JavaScript code so we are taking very
8:18
simple example we have the SAS code
8:20
JavaScript code we have the index. HTML
8:23
so now we need to define the gulp
8:28
file so you can just see the icon with
8:31
change and here you need to actually
8:33
Define all the configuration
8:35
options so I will now show you step by
8:38
step how to actually make this file so
8:41
inside this file first of all you need
8:44
to import all the packages which we
8:46
installed which is gulp so we need to
8:49
import that we also need to import the
8:53
gulp package for compiling SAS and also
8:56
the Base Library of SAS as well and then
9:00
we will be requiring the browser file
9:03
which will be required for bundling all
9:05
your JavaScript into a single
9:08
file and then we also need to install
9:11
this Vine Source
9:14
stream similarly we also need to require
9:18
the venal
9:22
buffer I think we haven't installed this
9:25
package so just install it as a depth
9:28
dependency
9:30
venil
9:35
buffer so after this we also need to say
9:38
babelify
9:43
require this as well so now we have
9:46
installed all the packages so now we
9:48
need to actually Define a task in gulp
9:52
by using the task method this will be
9:54
for the SAS so if you want to compile
9:56
the SAS into CSS so
9:59
here you'll be using the gp. source here
10:02
you need to provide the location in
10:04
which location the SAS code is located
10:06
so we are providing inside the source
10:08
trajectory we have the SAS folder so
10:11
here we'll be writing the regular
10:13
expression so all the files all the subd
10:16
directories which are present we need to
10:18
only target the SAS files and you'll be
10:20
using the pipe method to actually use
10:23
the SAS
10:26
compiler and here you'll say if any sort
10:29
of error take place
10:32
then log
10:35
error if no error take place then we
10:38
just need to save this as the
10:39
destination folder inside dis SL CSS so
10:45
this is actually the task responsible
10:47
for compiling SAS so here we are
10:49
providing the location where SAS is
10:51
located and then we are compiling it to
10:54
CSS then we come to the HTML part
11:01
but first of all let me show you if you
11:03
want to execute this task what we need
11:05
to say we need to Simply use the task
11:07
method and here you'll be using default
11:10
and then passing this task gulp do parel
11:14
and here you'll be passing this task
11:16
that you define
11:20
SAS so what it will do if you just write
11:22
this command gulp you will see on the
11:25
left hand side it will create a disc
11:27
folder so error plugin gulp SAS has no
11:31
longer has a default SAS compiler please
11:34
set one yourself
11:50
both okay we do need to require this
11:53
that was the problem
12:01
so now you can see it has created the
12:03
compilation is complete if it has
12:06
created a dis folder and it has compiled
12:09
everything which is there inside the
12:11
style. SAS into style. CSS so all your
12:16
SAS code has will compiled to
12:19
CSS so this is the thing now we come to
12:23
the next section if you also need to
12:27
actually HTML code if you also want to
12:30
generate this we will write another
12:32
task this time for the
12:37
HTML so now in the HTML we simply
12:39
provide the location where the HTML is
12:41
located so it is present inside the HTML
12:44
folder and then we will use the same
12:47
directory structure we only need to
12:50
Target the HTML files and then where we
12:53
need to save this so we need to save it
12:55
inside
12:56
dist now we need to add this task put a
12:59
comma and just add this task HTML so now
13:03
if you execute this gulp
13:06
command you will see it will also have
13:10
no such file or
13:14
directory
13:16
G okay we the HTML file is not present
13:22
inside HTML directory it is already
13:25
present in the source directory
13:30
so now it created a dis folder and now
13:33
also index. HTML is also present you can
13:37
just
13:39
see so now we come to the next section
13:42
if you want to use browser F you will
13:45
use a definer task browser
13:51
file so inside this we need to bundle
13:54
everything into a single Javascript file
13:56
so return browser file
14:00
so here we need to provide the location
14:02
where the JavaScript is located so it is
14:04
present inside the JS
14:07
folder and here pass the debug property
14:10
to
14:14
true and here we need to use the
14:16
transform method and here you'll be
14:18
using the babby file in to actually
14:23
convert this code to all the browsers so
14:26
here we need to provide the babble
14:28
preset
14:31
slash preset EnV put a comma and then we
14:36
also need the source Maps as well so put
14:38
it to
14:40
true and then browser contains this
14:42
method of bundle so it will bundle
14:44
everything into a single file and pipe
14:47
we need to Source it you can just give
14:50
any name to your file I am giving bundle
14:53
GS and then we'll again use buffer to
14:57
pipe it
14:59
and then again pipe to actually save it
15:02
to a dis
15:04
sljs so now we need to add this task
15:07
browser
15:10
file we can just add
15:13
this at the
15:20
top so now we have defined three task
15:23
using gulp first one for compiling SAS
15:26
second one for HTML third for JavaScript
15:28
using browser file so we are executing
15:31
these parallel task together using gulp
15:34
so if you try to now execute this
15:37
command gulp you will see on the left
15:39
hand side cannot find module Source JS
15:42
index
15:53
JS uh let me see what is
16:05
uh let me copy
16:12
this Source GS index CHS
16:52
uh let me Define a file right here
17:14
okay I think the
17:19
problem the problem is very simple in
17:22
the HTML we do need to include
17:24
this we forgot to include this
17:31
let me show you what what why this error
17:34
is happening in the index. HTML that you
17:37
defined you haven't included the
17:39
JavaScript code so just include this and
17:42
type you need to give it a module and
17:44
just Source it is present in the JS
17:46
folder index JS and here also you need
17:49
to also include the SAS code as
17:55
well or you can just say
18:02
CSS style. CSS
18:33
so right here you can actually say here
18:36
just execute this command Gulp and you
18:39
will see it will compile everything it
18:41
is creating a disc folder and now we got
18:44
the CSS code JavaScript bundle.js
18:47
and this is your index.
18:52
HTML so in the Gul file basically we
18:55
have required everything we defined
18:57
these three task and then we are
18:59
actually watching for changes so this
19:01
task is very important gulp task so if
19:04
you want to watch for changes you will
19:06
Define this task of watch so inside this
19:09
we basically use KP
19:12
for watching changes which are done in
19:15
SAS file HTML and browser file this is
19:19
Javascript HTML
19:21
SAS so that's why if you make any sort
19:23
of change you can run this file index
19:27
for HTML you can run this while
19:31
developing if you make any sort of
19:33
change if you go to SAS file now if I
19:36
make this
19:40
change so now you can see
19:48
automatically so the application is auto
19:52
reloading so this is actually the
19:54
workflow guys we actually understood how
19:56
which is gulp browser and babble how to
20:00
use these three Technologies together to
20:02
actually compile HTML SAS and JavaScript
20:05
code into one single file bundle JS and
20:08
compile the SAS into CSS so thank you
20:12
very much for watching this video and I
20:14
will be seeing you in the next one
#Programming
#Other