Transcripts
1. 1: Hi, my name is Sean
and welcome to my JavaScript building
for Hugo course. You've got has powerful built-in JavaScript building
features so that you're building requirements
are streamlined and you don't have to use external programs like
parcel rollup or Webpack. Maybe begin as he
may be wondering, what is JavaScript building and bundling and why
would I want to do it? This involves getting
multiple JavaScript modules or libraries and you
combine them into one file. You can actually only include the components of the
modules that you need. And we call this tree shaking. You can transfer the output of the code to work
with older browsers. And you can also minify the code that you
output and that is compressing it to
make it smaller so you get a faster
page learning. How does Hugo bundle
you go uses ESP, which is a fast
JavaScript bundle, and it's written in Go. It has a great API
interface with Hugo. Your code will automatically refreshing the browser on Save. Since ES building
integrated with you guys library load
development server, you can optionally use
Babel with AS build to transpire and include poly
fills for older browsers. What does this course cover? We'll look at
JavaScript bundling and building in general, using npm to download
libraries such as Bootstrap, module or library imports, fingerprinting the
output source maps for development so you can work out where the errors
have come from. Magnification for reduction. So your code loads faster. Targeting browsers for the
output to older browsers are compatible with the
code tree shaking. Only the parts of
the library that you're using are
actually included. And creating a
partial so you can reuse your code and not
have to copy and paste. Join me on this course
and you'll never use an external JavaScript
building tool with Hugo again, seeming the course.
2. Getting Started: Get started. First
thing you have to do is download the files
in the results section, you'll only have one
file to get started, and that's the zip file which
is called star dot zip. You'll have to extract
the files and then you can open the folder in
Visual Studio code. Before I show you
that you must have the latest version of
the following software, you need Hugo Visual
Studio code, node.js, which includes NPM
and on Windows and also includes chocolate
from Solon ego. And optionally, the recommended is CLI and GitHub Desktop. Once you've extracted
the folder, if you've set up VS
code like I recommended in my getting started
with Hugo course. That's just the first
video of the course. And I'll lift that LinkedIn
in the results section below. You can right-click
and open with code. Then from there, everything's ready to go in Visual Studio. In the next lesson,
I'll show you how to get started with
all these files.
3. NPM Setup: The first thing you have
to do before we get into JavaScript building is
setup our NPM environment. We're going to initialize the
project within him in it. We then going to install the bootstrap file package
with npm install Bootstrap. And then we're going to create
some basic indium scripts for the development server
and the build command. I've opened up the Getting Started dot zip the
extracted folder, and I've opened that in Australia code as
per the last video, you need to go into
the terminal menu and then new terminal
and type npm init. Now it's going to ask you
quite a few questions. And these questions are targeted towards people who
are trying to publish there project on
the NPM registry. We're not going to
be doing that too. Not all these questions are
actually that important. The first question is the package name and that
gets pulled from the name of the folder
that the project sitting. Default is usually fine unless your folder name
isn't quite correct. Just hit enter to
accept the default. If you happy with that version, isn't that important
unless you're focusing on versioning and I'm not gonna go through versioning
in this video. That's for another video. Description doesn't
really matter. Again, that's for the NPM. Registry. Entry point doesn't
really matter. Test command doesn't
matter for us. And I do like to
make sure they get repository IES correct
because it's a good record of where they get
repository is easiest as an easy record defined
in case you needed. He was that matter.
Author doesn't matter, and losses doesn't really
matter, not publishing. You then got to hit Enter to confirm that everything's okay. Then you'll see a
package.json file. If you open that
up, it'll reflect everything that we
just didn't put it except for the addition
of a test script, which actually doesn't
do any testing. Let's go ahead and install
Bootstrap and then we'll head back into these
package.json file. So close that off
and get back to the terminal and typing npm, install Bootstrap and hit Enter. You'll see it's
installed to packages. Let's kind of looking
at node modules folder we should
just being credit. Honestly, I have
Bootstrap and pop ab.js. And pop ab.js is actually
a dependency of Bootstrap. If you ever been Bootstrap
and their package.json file, you'll notice set,
if we scroll down, they've got a P dependency
of puppet dot js. And that's another package that bootstrap actually uses
for its JavaScript. It's other Bootstrap folder. You'll see. You'll see some soils falls. And we're gonna be working
by importing files out of his Bootstrap folder
and modifying them as necessary and then
building them with Hugo. Close that package.json
Dann die get confused. Minimize the node
modules folder, and we'll go back into
the package.json. And you'll see that we've now got a dependency
at the bottom of Bootstrap. Project relies on Bootstrap. We're then going to
look at our scripts, will back out all
of the content of that test script will
keep the inverted commas. And then we'll back
out the word test. More price that with div. During the development server, we need to run he
goes space server. Then we're gonna run an
option which is dash, dash, disable fast, render. Make sure you put a
capital F and capital R. The next option will
use his dash, dash GC. And that stands for
garbage collection. What that's gonna do, because
we're actually producing resources with Hugo would
making some JavaScript files. We want you guys to get rid of any old
files when it runs, and that's what garbage
collection is all about. Thanks, I'm gonna do, we're
gonna run a build script. So put a comma in and
then interfere new line. Put some inverted commas
in and we'll write, build, and then a colon and a space and some
more inverted commas. We're gonna run Hugo. But this time I'm going to
run dash, dash, dash, dash. Then we'll save that. You don't put a comma after
your second law and last law, and you can only put
commas in-between lines, otherwise, it will
generate an error. You'll then let us individuals pseudocode down the
bottom that the word, words NPM script will
repeat from them. We can actually run
the script quite easily without using
the command line. We'll start off with
the dev server will hit play and we'll
check that works. That's working great and you can Control click to open it up. In the survey, I said
to you that you have the actual website that
building working on in this course and it's using
the library load server. So if you make any changes in Visual Studio Code and hit Save, Reload automatically
in the browser. Now throughout this
course, what we're doing if you go to right-click
and inspect, or if you shrink
your window down, you get into the mobile mode. You'll notice there's a
little menu in the top right. If you click on that,
it actually uses the Bootstrap JavaScript
library to do that drop-down. That animation is
controlled by JavaScript. That's a great way to check that JavaScript is actually working. We go into the head. You'll see that currently
where you'll see the JavaScript for the
automatic reload through Hugo. That's the first thing
that comes in there. And then later on
you'll see a link to the JavaScript library. Down in the footer. That's a CDN, that's an
online server that's setting up the JavaScript to the browser
that Bootstrap requires.
4. Basic JavaScript Build: Now let's look at doing a basic JavaScript build using Hugo. Although we're not
going to get heavy into the configuration yet, what we're gonna do
is we're going to use a generic configuration to build Bootstrap's JavaScript
library from its node module source which
were previously downloaded. By doing this, we don't
have to rely on the CDN, which is quite for
offline development. And later on we're going to
actually want to customize the build as we have
access to the source. So we're going to actually not
include the whole library. We're only going to include
the parts we're using to minimize,
minimize false eyes. We can also customize which browsers the JavaScript build
is his arm to work with. Because as default,
the source will only work with the
most modern browsers. We're going to use some
translation to get that modern code
made a little bit older so that other browsers
will actually work with it. I'll leave links to these two pages that
we're going to look at in the resources
section under this lesson, the first link is
to ear spilled. We're not going to go
much into this page at all because it does get quite
complicated quite quickly. The great reference
to have because of the Hugo doc isn't that
complex or in-depth? There's a good little graphic of the star and it shows you a good comparison as to how quick ASPE
would actually use. Another advantage to AS build is that it's written
in Go and it has a great API and it
works really fast with Hugo because he goes
root and we go as well. We're really concerned
with however easily Hugo docs page for
JavaScript building. And as I said that links also
in the resources section, There's a bunch of
options that we can provide at the moment, we're not so worried
about the options. If you just go right
to the bottom, you'll see an example. Where can I heart that
example and copy it? And then we'll paste
it into the project. It's actually quite simple. You can even hand write
it in. In the project. You can close the
package.json file hitting two layouts and then partials. And we'll go into script footer. And we're gonna keep
that first-line for the footage JavaScript file, but we're going to
highlight everything else and do Control Casey
to comment it out. And we'll save that. And then we'll go into the head. Then after your CSS,
we'll make a new line. We'll do bootstrap In this. Highlight that and then we'll
comment it with Control K. See, what they have to do
is paste in that code. At the moment, we're not sorry, I had the option so we can get rid of those top two lines. And then after JS doc
build will get rid of the ops we're going
to edit in later, but for now we'll get rid of it. We'll save that before that's going to work and you'll see an area that's come up. It's asking for a file
in script slash main.js. We're going to change
that to js slash main.js. Probably wondering
where does that go? If you click in the root
of the project and make a new folder or making a
new folder called assets. Inside that, we're
going to place any file that we want Hugo to
modify or build width. So we're gonna make
a folder called js. And all of these
links are relative to the Assets folder inside that JS folder will make
a file called main.js. Will save Adam will
re-save the head. Then we'll kill the server and we'll run developments over again and we
shouldn't get an error. And everything's
great. When I'm ready for the next lesson where
we important Bootstrap.
5. Import JavaScript Modules: It's never going to import
a JavaScript module to be able to bring the Bootstrap
JavaScript library into our JS builder
and output a file. We need to use an import
statement with JavaScript. Importing will pull the
library or the module. They're actually all modules, but we're working
with the library into the file where the
import statement called. If you need to import
another library, they'll provide instructions
on how to do the import. Back in the project. We'll go into the main.js file and we're gonna use
an import statement. And to do that you write import, going to import style, which is everything
as bootstrap from. And then we'll use the
signal embedded comments. And we'll import from bootstrap. And that will direct the JavaScript builder to
our node modules folder. What did they end?
Does it goes into the Bootstrap folder up, as we've specified up here. And it will look into
the package.json. And because ES6, because ESBL
is actually an ES6 buildup, It will then look down for
the keyword of module. And then from there, module specify which
file to import. You'll say, Hey, we
have a module directive and that's decent slash js
slash bootstrap.css, ab.js. So we're looking there,
decreased slash, slash, bootstrap
dot ESM, not JS. That's the actual file. It's gonna be important mobile. Look more into that in a moment. I will say that it is
actually grayed out and that's because we've
declared the variable Bootstrap, but it's never been used. And that's okay
because Bootstrap actually initializes on its own. Bootstrap doesn't need
us to actually call that variable Bootstrap to get started, starts on its own. So don't worry about that. We run the dev server, will
check everything's working. You probably have to kill
the server and run it again with things
aren't working for you. Once you've opened up in
the browser, you click, you can make your screen
smaller and click on the menu, any of that menu dropping
down, everything's correct. You can check it
out by going into the head and scroll down and you'll see a link to the
main.js file that we've built. And if you go into sources, you'll see the
JavaScript folder. And there's the main.js file. And the first thing
that's very important is the puppet dot js
dependency score. Out to the bottom, you'll see the copyright notice for
Bootstrap JavaScript lottery. That's working well, we've
imported the whole library.
6. Development and Production Config: Similar to look at creating
some configuration for development and
production environments, we do actually need the configuration to be
slightly different depending on whether a
developing and that's when we're working on a debugging
the website. Or if we're trying to ship production code which needs to be as smallest
possible to a server. So you need to make
things a bit different. Now here's the
basics, what we're going to sit in development. We want source maps
to the enabled, but we don't want
any magnification. We don't have to actually set the minification option because
that happens by default. In production. We want source maps disabled. And that's actually
bought a fault as well, but we do need to
minify the code. In your project. You need to go into
the Layouts folder and then open up
the header.html. You'll see we've got
Bootstrap JS here. After JS doc build, we need to specify
the option to opt. And then we're gonna create
a variable here for ops. Put in some double curly braces. And then we do a dollar
sign and we do UPS. Now because we are defining this variable for
the first time, we have to use a colon equals. Now to provide options to
the JavaScript building, we need to use a dictionary, and it's also
referred to as a map. So dict. Let's then go to
the docs and we'll have a look at what
the options are. If we scroll up, look down, and you'll say minify. And that can be set as true or false by default, it's on false. The next option we need
to do is a source map. And if we want to enable it, we have to use inline. Let's go and set that up. For production. We're going to set minify makes you put
that in inverted commas. And then next to that
we're going to do true. And you don't need
inverted commas for that. Now, before we move on, if you put dashes at
the start and the end of all your lines of
code with curly braces. That means that no new
lines or spaces will be inserted into
your actual HTML. That makes debugging lot easier.
I'll do it here as well. Makes you put a space between
the dash and the comment. Introduce face and the dash. And we'll do it here as well. But I will not put a dash at
the end because I do want a new line before the
script tag gets inserted. So that's our
production options. Radula, comment for myself
production options. And I'll highlight that
and do draw Casey, what I'm gonna do our
development options. That these options will be override the default developing. Let's have a look
how that works. So we do make a new line. I'll put some dashes in
as well before we forget. I'll do that for these
comments as well. It makes debugging a lot easier if you didn't already
put new lines and new code will do if EQ, and that stands for if equals. That's Hugo. Dot environment makes
use a capital a. And then inverted
commas development. Go environment will return the environment
we're currently in. And if we're in a
development environment, the word development
will be returned. And that is equal
to development. And then the following
will happen. Will put us Bay
alanine and we'll do an end tag with some dashes. Then what we'll do, we'll copy our UPS line and paste it in. But the most important
thing is you must remove that column because we were
redefining the variable. You have to remove the
column will have an issue. We'll get rid of minify. And we'll do source map. You must use a capital
M for source map. The only option
available is inline. What our initial
options for production. If we're developing initial
step will take place. And that's okay. And it will overwrite
with this law and he is a noun minification will take place for development. We do have an inline source map. We'll save that. And we'll give it a go.
We'll run the dev script. Let's have a look in the server. We've still got our
JavaScript working because that mobile
news functioning. We go into the JS file. You'll notice now there's a
node modules folder there. And you probably wondering why, what isn't node modules
folder doing in my JavaScript folder
for my website. If you go into main.js and
swore right to the bottom, you'll see a line there and
it's got the source map URL. What that's doing, if we're
trying to debug the code, the brass is actually pulling in our node modules dependencies. And you can actually click on a Era and
it'll actually show you where that error exists in the falls that you'll
pulling into Build. You can actually go back to
the soil so work out where the error occurs and that
tell a source map works. But in production that's
not gonna happen. So let's have a
look at production now and see how it's different. Foodie production. You'll notice the codes full
of spaces and new lines and invented very neatly and
it's very easy to read. Let's go ahead and check
out our production code. What we'll do, we'll
hit the Trash button to kill the terminal,
the build button. This won't run in the server, but what happens is he creates
a public folder for us. And in here are all
the files are ready to upload to an FTP server. We open the JavaScript
file and then the main.js. You'll notice that things
are completely different. We haven't gotten me spaces
on new lines anymore. And all the variables
have been shortened down to really short characters to try and compress the size of the file and minimize the amount of characters
is being used. So that's like one long big Alon that's for the whole file. So it's much smaller
than it used to be.
7. Fingerprinting: The next step is fingerprinting, will be generating a
fingerprint that's a hash file based on the output
of JavaScript file. For many reasons,
the actual filename, we'll have the fingerprint
added to the file name, which makes the fall unique. The browser won't get a newer
built file confused with an old file because I both have different hashes in
the actual file names. The other reason is
the browser can use the fingerprint to check that the JavaScript
file hasn't been replaced and that's
a security check. We're actually going to provide a check number and that will be checked
against the actual file. The browser can work out whether the file that's
being downloaded and loaded into the browser is
actually the correct fall that we've put there ourselves.
So let's get started. The link to this page in
the results section below, these guys through how
the fingerprinting works with Hugo. Now if you ever look
the way it works here, they've got the actual resource
and then they're running, they're using a pipe
and then they're running through resources,
not fingerprint. We can actually remove
the resources part and just run fingerprint. We must use a lowercase f. And the spacing specifying
SHA-512 top of fingerprint. We can leave that
off if we want. What we can do now is
after we've done that, we can put the
integrity property in. We've just got a specify the
same variable as the source. But instead of doing a dot
permalink or real permalink, we have to specify dot,
dot, dot integrity. And that will be a hash. Let's give that a go. I go into layouts and
then partials and head. You'll see we getting
our resource, then we're doing a pipe and we're running it
through JS build. It will then put another
piping Moran fingerprint. Then the script tag after the source, we'll
talk integrity. Then just likely source we're
using a built-in variable. We'll type in built
for this time we'll do dot data with a capital
D and dot integrity. We'll close our
double curly braces. Then we'll save that and
we'll run the dev server. And we'll have a look. We'll just check
out JavaScript's working with the
dropdown, which is great. They go into js file. Learners to JS file now has
a hash out to the file name. The file itself is the same.
What a hash on the inside. As we update our JavaScript, a new file will be output as new hash and the browser is forced down
with the new file. You won't have any
caching issues. The other thing we can
do is we can go to elements and then
open up the head of the document and
scroll down and you'll notice we've got our filename
there with the hash, that attitude, and we've
got our integrity in there. By default it's SHA-256 sets. The encoding is that hash will be checked
against this file, not the actual filename,
but the contents of it. And if the contents of that file turn out
to be that hash, then we're good to go and
the security checks passed.
8. Treeshaking: This lesson is all
about tree shaking. Tree shaking, where
we only include the required parts of the library and then
they are built. To do this, you must first only import the library
components that you need. Esbl, which is what Hugo uses, supports tree
shaking by default. That's based on the components
which are important, so it's actually
quite easy to do. And the main reason we do this is it helps keep file sizes down because a lot of the file is the slower the pages to load. And if you're using a few different
libraries and your page, it's gonna slow
down quite quickly. So let's get into it. We're gonna do,
is we're going to have a look at, first of all, open up the assets and
main.js and we'll highlight that and do Control case either
comment it out above it. We'll put in a comment that is import the whole
bootstrap library. And we're not gonna
do that anymore, but we'll leave it
anyways as a reference. The next thing
we'll do is import only the required
parts of the library. He is how we'll do it.
We're going to do import. Then those parts from bootstrap. The way we work out which
parts we can actually import. We go into our no modules
folder and then bootstrap. And we worked out that the file that's being used for building is the going to
disk and then js, and then it's bootstrap
dot ESM dot js. If you score right to
the bottom of the file, you'll notice we
have our export. If you highlight all of those words in there
and copy them, you can paste them in here. That will actually be
importing everything. But we don't want that. So what we're gonna do is
we're gonna put all of these words on new lines. Then we can easily
comment them out. If need be. To keep hitting Enter
to get those new lines. Will get that last
breakout newline. Now by default, the
only thing you actually need for the site that I've
got set up is collapse. We use Control Casey to
comment all of these out. You don't need drop-down for a drop-down menus diving lot
drop-down menu setup anyway. Then we'll control Casey
that actually tooltip. Last one topic. Then we'll hit Control S to
save run the dev server. And we'll have a look. We'll check our
JavaScripts working. So the collapses obviously
being important. Then go into the head and you can see where still
importing the same file. And then we'll go into
sources and JavaScript. And there's our import. It's still gonna be
importing pop app.js, which is not the
biggest library. But at the end running gonna be importing the part
of the Bootstrap. While I read that we require, which is gonna be quite
a saving of size.
9. Set Output Target: Now we just set
our output target. Esp world can translate most
new JavaScript syntax into older versions down to
a maximum of ES 2015. Espn cannot translate
down to S5 and ears 5's what Internet Explorer and
many other older browsers use. But fortunately,
that's generally not a requirement and
it's not something that Bootstrap supports anyway, it's about a fault AS
build translates language up to the newest ears version
is actually called ES next, which is to modern for most
browsers support a fault. He going ESP old
and actually set up to work in the
majority of browsers. We're gonna set up ESBL, so it translates
down to ES 2015. I love this link in the
there's also section. It's a really good
site called Can I use? And in Kenya I use,
I'll put in ES6, which is also called
ECMAScript 20152015. And you'll notice that
Internet Explorer doesn't support most of the
S6 Edge from 20, $17 Firefox back in 2017
does Chrome from 2016. Safari from 2016, ES6 has
actually got quite good support and I'll show you what
Bootstrap currently support on that
bootstrap GitHub page, if you scroll down and
open up browsers list RC. And I'll leave a link for this
in the resources section. This is what the file that
Bootstrap provides to the CDN. This is what they
support out of the box. They support Chrome version 60, Firefox version 60, iOS 12, Safari 12, and not
Internet Explorer. Let's go and compare
that to ES6. They're doing Chrome version 60. Es6 is actually
down to Chrome 51. They do Firefox version 60, we're actually gonna
support down to Version 54. And then they do version
12 for Safari on iOS. Version tool for Safari works, you're gonna be supporting
the integration tin. So by specifying
ES6 in hago were actually supporting a
little bit more than what Bootstrap actually
supports by default. So there isn't any
harm in doing that. So back on the JavaScript
building docs page, you'll see an option
called target, and you'll see the
default ES next. And that's not very useful
because that's gonna be using some of the most modern
language features which a lot of browsers
aren't going to support. We're going to choose ES 2015. There is an auctioneer
of ES five, but the reality is ESBL
doesn't know how to translate. Most language fixes
down to ES five. And if you actually say as five, you're more than likely
gonna get errors. Use a target of IAS 2015 will
go into the Layouts folder, and then partials,
and then head. And you'll see we've
got our options here. For both those will use
Alt click will do target. Es 2015. We'll just run a quick check so that it looks
like it's related. When I'm changing
configuration like this, I'll have to kill the server and restart it just to be sure. And then we'll check
that in the browser. When you start,
when you erase out, so that you do have to
refresh in the browser. So our JavaScript still working. We can see we're still
getting up file in there. Everything is good.
10. 10: If you've made it this far,
you're doing really well. This is the last thing we're
gonna do in the course, and that is creating a partial. Got to move all of the JavaScript build code which we've just completed
into a partial. And we're doing that so
we can reuse the code for any JavaScript building
tasks that we have. We didn't have to copy and paste anything. We can just reuse it. Now normally you'd assign the
dot context to a partial. But in this case we're
going to actually assign the path of
the JavaScript file, which we're going to
build to the partial. And that will instruct the partial on which fall
needs to be built. Link to the docs page about
partial templates case. You won't do any further reading
in terms of this lesson. I'm trying to keep it
as simple as possible. We'll do is we will leave our Bootstrap
JS comment in there, and then below it we
will write partial. Then we're going to provide
a part of the partial and we will just call
that partial ES build. Then normally you would put a dot in here
for the contexts you provided to the partial. But in this case what
we'll do is we will do js slash main.js. Copying that from down here. What we'll do is we will
replace it with the dot, and then we'll grab all that code and
Control X to cut it. I'm not gonna say this
because I've actually got the server running
that at one an era. I'm then going to
go into my layouts and then partials and I'll make a new partial
code, ESBL dot HTML. And I'll paste that code in. What's really important
is you've got the dot there for the actual
resource you're building and that will be assigned by providing the path to the
fall he after the partial. I'll say that. I'll save my head and then
we'll check it out. Go right-click and inspect. And then we'll go to sources. And we'll say that
under JavaScript, we've got our main
JavaScript file. Just to test the concept. We will now have got building the footage IS
there's not much in it, but we'll build it anyway
just for the sake of testing. I'll just put a copy and
paste these two lines below and we'll
call this footage IS you probably wouldn't
normally separate them, but just for testing
early dot js. And then we'll have to do
is go into the static and JS and drag that into our
SSH assets slash js folder. Then I'll save the head. Now we've got our footer
file being built by ES building Hugo said
there's not much in it. I'll probably wouldn't
normally include that in the main file because it's
no point splitting it out. But just to demonstrate how powerful these
partials really are. If you have any other JavaScript files
you'd like to build, all you have to do is copy and paste the line and
change the path. And that is relative to the
Assets folder because we are dealing with the results
says dot get function.