Up next in 10
This VSCode Extension Will Automatically Minify and Compress CSS Files as You Code them
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 I will show you how to
0:04
Minify or compress a part of your CSS
0:08
instead of compressing the entire file
0:10
there is an extension right here in vs
0:12
code for doing this purpose which is
0:15
minii selection so let's suppose if you
0:18
have a CSS file right here which you are
0:21
using it inside your application in my
0:23
index.
0:25
HTML let me show you this is actually
0:28
the overall application simple password
0:31
generator so we are actually using
0:34
custom CSS for this style. CSS if you
0:37
want to Minify this file uh we
0:40
have a extension here which is Minify
0:44
selection so if you just type this in
0:47
the search bar of your extension the
0:50
this extension comes here
0:52
177,000 installs just select here very
0:56
simple extension no advanced settings
0:58
are there simple
1:00
you need to Simply click on the install
1:02
button to install this extension now to
1:06
get started inside your style. CSS so
1:09
this is our CSS here and
1:11
the thing about this extension is that
1:14
you can select part of your CSS so if
1:17
you only want to compress this part you
1:19
need to Simply select this part with the
1:21
help of mouse simply select this and
1:24
then type on your keyboard the shortcut
1:26
key which is control shift p and then
1:29
simply search Minify type here Minify
1:32
selection Minify selected CSS so if you
1:35
just select this now the CSS that you
1:38
have selected has been minified and
1:40
compressed you will just see all the
1:42
white space has been gone right here so
1:46
if you want to push this code into
1:49
production it's a very simple process or
1:52
if you want to do it the entire file
1:54
simply select the code on the entire
1:56
file and just
2:01
control shift p Minify selection minifi
2:04
select you can now see all the CSS have
2:06
been successfully compressed and
2:08
minified and still if you open this
2:11
application still this application will
2:13
work the same you can just
2:16
see so this is a very handy extension to
2:19
have in vs code if you are working with
2:21
CSS files if you want to do Minify part
2:24
of your CSS if you only want to Minify
2:28
this part
2:31
that it you can just
2:35
see so it basically saves a lot of time
2:39
because we don't need any third party
2:40
CSS Minify you can do it entirely inside
2:43
vs code with the help of this extension
2:47
so you can just
2:49
see you can create multiple files here
2:52
if you have a second file style do 2
2:55
CSS if you have some basic code right
2:58
here
3:10
so we have the second file here you can
3:12
select this also it works with all the
3:18
files so you can just see the power of
3:21
this uh extension the extension is very
3:25
simple minifi selection it only works
3:27
with the CSS file only that's a little
3:30
bit downside of this extension but still
3:33
it's a very handy extension if you are
3:35
working with the CSS files if you want
3:37
to Minify them right inside your vs code
3:42
if you don't want to leave your editor
3:43
you can directly use this simply select
3:47
the code that you want to Minify control
3:49
shift p then Minify this code like this
3:53
so this was a short little video guys I
3:55
wanted to just show you this extension
3:57
or Plugin in vs code to actually Minify
4:00
and compress your CSS while you are
4:03
developing your application thank you
4:05
very much for watching this video and
4:07
please hit that like button subscribe
4:09
the channel for more videos like this
4:11
and I will be seeing you in the next one
#Computers & Electronics
#Software