Minify CSS, JavaScript, HTML easily right from Code Editor
Aug 15, 2023
Minify CSS, JavaScript, HTML easily right from Code Editor
Why minification matters? When you write code, write comments as much as you can, use good naming conventions, use spaces and write beautiful code. This is for your own understanding. If you are working in a team, other developers can also understand well written, well commented code. Readable code welcomes you when you revisit it to modify it, build on top of it or develop it further. But machine does not need beautiful code, with spaces and comments. Computer processor prefers code without comments and spaces. Minification is a process of removing extra spaces, line breaks and comments from code. It also changes long variables names into short names. Minified file is less in size and it can load in web browser quickly.https://www.webstylepress.com https://www.facebook.com/webstylepress/ https://twitter.com/webstylepress https://www.instagram.com/webstylepress https://www.linkedin.com/company/webs …https://github.com/webstylepress
Content
5.84 -> welcome to webstylepress if you are new here
consider subscribing and hit bell icon this is
12 -> cdn js you can search plugins jquery plugins at
this site and you can select different versions
23.84 -> when you select any versions it will offer you
files that you can link you can copy the link
30.32 -> from here and you can link those files in your
project but you can see jquery.js jquery.min.map
38.96 -> jquery.slim.js this is separate file but as
you can see jquery.js and then jquery.mend.js
49.36 -> so min is the minified version of file what is
minification why do you need minification why do
59.84 -> we need dot mean files in your project and how can
you minify css files javascript files even html
68.8 -> files easily when you write code write comments
as much as you can use good naming conventions use
79.92 -> spaces and write beautiful code this is for your
own understanding and for your own convenience
88.08 -> if you are working in a team other devs can also
understand a well-written well-commented code
96 -> readable code welcomes you when you revisit it to
modify it build on top of it or develop it further
106.32 -> but machines do not need beautiful code machines
do not need comments or spaces computer processor
116.64 -> prefers code without comments and spaces
minification is a process of removing extra spaces
124.48 -> line breaks and comments from code it also
changes long variable names into short names
133.36 -> minified file is less in size and
it can load in web browser quickly
140.48 -> faster than the source file work
with css and javascript files
146.56 -> but minify them at the end keep the source and
link minified versions of css and javascript
154.72 -> files in the webpage there are tools routines
bundlers that can minify code as you save your
162.64 -> code but i am giving you a really really simple
and easy way to minify css in javascript code
170.4 -> you can even minify html document minified
code also protects itself from steelers
179.04 -> because it is not much readable it is
a convention to save minified file with
186.48 -> the dodman dot file extension name for example
custom.css will be minified into custom.main.css
195.2 -> custom.js file will be minified into custom.min.js
file developers use plugins and libraries
205.36 -> in their projects they prefer linking minified
versions for example this is the html page
218.88 -> and this is the template of a web page
234.24 -> as you can see this is custom.js linked in this
238.08 -> html page and i have got this custom
dotment.js file below this and
248.16 -> here i want to use
252.48 -> this custom.css file and
custom.mend.css file commented
264.4 -> so in this project you can see this project
tree inside scripts i've got custom.js
273.36 -> inside styles4 i've got custom.css file and
scripts and styles folders are in assets folder
288.72 -> this is my html document for css
304 -> i will use another template
309.28 -> i'm not using sas here
319.28 -> simple css so this is readable code
328.16 -> well indented as well so this is my
custom.css file and this is my js file
352.24 -> this is what minified code looks like this
chunk is already minified and this as well
364.16 -> and i've got this code and then
comments and let's just save it
372.72 -> so index.html custom.css and custom.js here is how
you can minify files use your favorite code editor
384.24 -> like visual studio code i will recommend visual
studio code it is available for windows for mac
391.6 -> for linux free to download in fact
it is here search visual studio code
398.96 -> and you can come at this page download this code
editor from here for mac os for windows for linux
414.32 -> and this is the editor
418.32 -> and here if you see extensions click this icon
432.16 -> search an extension named as minify
438.96 -> this is the extension click edit
446 -> install it i have already installed it and after
installation enable it and that's it it can minify
457.76 -> javascript files css files and html files run the
file minifier with f1 minify minifies the command
472.24 -> so the extension is installed you need
this extension click edit this come back
483.12 -> to see your file and i am in this custom.css file
right now and it is here custom.css file just
493.68 -> this file here press f1 here
and as you can see this is the
502.8 -> command to minify the document already given here
if it is not here just type minify and you will
512.08 -> find this command click at this minify command
and see here see this css file was generated
527.6 -> so this is the css regular code and this
is the minified version how beautiful
541.68 -> less in size no commenting no spaces just
the code that will be easily and quickly
553.04 -> readable by machine
556.48 -> so now i have got this custom
document.css now i can link it here
563.12 -> i can comment this line and i can
uncomment this so now custom.min.css is
571.84 -> linked with my html document so we have minified
css file now we have got custom.js file click f1
586.16 -> and as you can see minify click minify
591.2 -> and this custom.min.js file just dropped here
this is commented code and regular javascript
602.96 -> code and this is minified version how beautiful
now that i have got this custom document.js
622 -> i will link this file instead of
regular js file i will comment this
630.96 -> and i will uncomment this so when
you are done with your project
637.76 -> convert your css files and javascript files
into minified code easily by giving this command
644.64 -> right from your code editor and use those
files and it generates that minified file
654.4 -> in the same folder that has got
its original file as you can see
662.72 -> style folder that had got custom.css file has
also got now custom.css and then for this scripts
672.16 -> folder it has also got custom document.js file
so same folder will receive that minified version
680.08 -> so to minify this html document press f1
click at this minify and index.min.html
691.68 -> was created here
696.48 -> so this is how you can create minified versions of
html document css file or javascript files easily
705.68 -> right from your code editor by using this
beautiful extension for visual studio code
720 -> that's it i hope you liked this video if i missed
anything comment down below if you haven't already
725.68 -> subscribed subscribe to this channel and hit bell
icon to receive updates join us on social media
731.6 -> links are in the description below stay tuned
for more updates i will see you in the next video
Source: https://www.youtube.com/watch?v=AY40N9a9PDA
