Loading...

Exercise (Video): NPM Scripts Part 2

Course video 52 of 58

This module rounds out our discussions on Bootstrap JavaScript components. Then we discuss CSS preprocessors, Less and Sass. Finally, we discuss building and deployment of our Web projects through task automation using NPM scripts, and task runners like Grunt and Gulp. The final assignment of this course needs to be completed at the end of this module.

Front-End Web UI Frameworks and Tools: Bootstrap 4

香港科技大学

课程 1（共 4 门，Full-Stack Web Development with React 专项课程）

This course will give you an overview of client-side web UI frameworks, in particular Bootstrap 4. You will learn about grids and responsive design, Bootstrap CSS and JavaScript components. You will learn about CSS preprocessors, Less and Sass. You will also learn the basics of Node.js and NPM and task runners like Grunt and Gulp. At the end of this course, you will be able to a)Set up, design and style a web page using Bootstrap 4 and its components, b) Create a responsive web page design, and c) Make use of web tools to setup and manage web sites. This course also includes an honors track that enables you to work on your own project developing a website using Bootstrap 4. Students enrolling in this course should have prior good working knowledge of HTML, CSS and JavaScript.

查看授课大纲

您将学习的技能

Bootstrap (Front-End Framework), Node.Js, Jquery, SASS (Stylesheet Language)

教学方

Jogesh K. Muppala
Associate Professor

脚本

[MUSIC]

We'll now continue our journey with NPM scripts in this next exercise.

Here, we're going to learn how to be able to build

a distribution folder which contains all the files for

our project that we can simply deploy to a web server that hosts our website.

So given the HTML, CSS, and JavaScript files that

we have already prepared in our project folder, we're going to, from those,

process them by using the various tasks that we talked about.

That is doing a CSS modification,

concatenation, and JavaScript uglification, minification,

and HTML minification and

then generate a distribution folder with all the files.

But essentially forms the set of files that can be

deployed to our web server that hosts our website.

To help you understand what we are going to do in this particular exercise,

as we note from our index.html page, we have a set of

CSS files that you included here using this link tag here.

Similarly, you have a set of scripts that you have included

at the bottom of this page using the script tag.

We've included a set of JavaScript code.

Now, what we're going to do in this exercise is to combine all these

files into a single JavaScript file that will be delivered

from our web server to a browser that is trying to view our website.

This way, we minimize the number of downloads that the browser needs to do

in order to render our website.

Similarly, we're going to combine all the CSS code into one single CSS file,

so that it can be delivered.

So the combined CSS file will contain all the code for

Bootstrap plus Bootstrap social, and also the Font Awesome and

also the CSS code that we ourselves wrote.

Similarly, there will be a single JavaScript file which

will contain the jQuery tether, Bootstrap and the JavaScript code that we,

ourselves wrote, all combined together in one single file.

Now, this is how you can do deployment of your web pages.

And instead of having multiple such files there, one way that

deployment is done is to combine them into a single file so that one single download

you get all the JavaScript code necessary for rendering your web page.

One single download you get all the CSS code necessary for

rendering your web page.

And then, of course, the HTML file itself is going to be downloaded.

To get these tasks to be completed, we need to use

a certain set of NPM modules to accomplish this.

Now, what we will end up doing is to build a folder

in our projects file, and then we call that folder as dist, D-I-S-T.

I'm just randomly naming that as a dist folder.

In my case, what I mean by the dist folder is a distribution folder.

At the end of the set of steps we're going to do, this folder will contain all

the files that can be simply copied to the web server that hosts our website.

To get started, what we're going to do is to set up a set of

scripts here that will help us to automate this process.

So first thing, we might

prepare the distribution folder once then maybe we may do some edits

to our source files then we may need to recompile our distribution folder.

First step, we would set up the script for cleaning out that distribution folder

essentially meaning, delete the distribution folder.

So to do that, I'm going to take the help of an NPM module called as rimfraf.

So I will install npm --save-dev rimfraf.

This module helps us to clean out a folder completely.

So once I have installed this, then I will set up a script

in my package.json file to clean out all the files.

Going to the package.json file, I'm going to add in, so

remember always that coma is very, very important in those scripts.

Sometimes you'll run into problems just because you forgot the comma.

So make sure you put those commas where necessary.

The next descript that I'm going to add is, clean,

obviously as the name implies, this is going to clean out my folder.

So I will say rimraf dist.

What this means is that this, when executed,

will clean out the distribution folder.

So I will add that in, and

then I will put that comma there because I'm going to add more scripts below this.

So let me save the changes, the next step that I'm going to do is

to install an npm module called copy files which are used to copy

some font files from my node modules folder into my distribution folder.

So that when it is deployed, the font files also get deployed.

Going to the terminal, the next package that I'm going to install is

npm -g, recall that this means that it should be installed globally.

Since I am doing this on a Mac,

I should say sudo npm -g, if you are doing it on Windows, you don't need the sudo.

sudo npm -g install copy files.

And then once that is installed ,this NPM module will help me to copy

files from one folder to another folder.

Now, let me introduce another NPM script here.

Going to my package.json file,

I'm going to create a new scrip here name copyfonts.

This script is going to enable me to copy all the fonts files from my

Font Awesome folder into my distribution folder.

So that when my website is rendered,

all these fonts files can also be sent out, such that

my webpages are rendered correctly with the Font Awesome fonts in place.

So to do that, I'll say, copy files -f,

-f means it just simply copies the files without the full of hierarchy and

simply copies the files from one location to another location.

So I'll say copy files -f

node_modules/font_awesome/fonts/star

And dist/fonts,

And then save the changes.

Let me now illustrate how these two npm scripts work together.

Going to my command window, I will type

npm run copyfonts.

When this runs, it's going to create a folder

named dist in my project folder hierarchy.

And then inside the dist,

there will be a subfolder named fonts, which will contain the font files.

So running this,

you will immediately notice that the distribution folder is created here.

And inside the distribution folder,

you can see that there is a subfolder named fonts.

And inside there, all the fontawesome files have been copied.

This is how the copyfonts script works.

Now, I'm going to show you how the clean script works.

So if I type in npm run clean, this is going to delete that distribution folder.

So when I run that, then you would notice that

the distribution folder gets deleted from my projects folder hierarchy.

So this is how the clean works.

Now that we have these two scripts set up,

we now need to be able to build up the remaining distribution files.

In the next step, we're going to install a node module called imagemin-cli,

which is the command line interface for the imagemin module.

The imaginemin module will take a sect of image files and then compress them down.

So it stacked the size of those files are minimized as far as possible,

but still be rendered properly when our website is rendered.

So this way, we will reduce the amount of data that

needs to be downloaded by the browser when it needs to render our webpage.

So if you are including images into your webpage, then imagemin task is

something that you should learn in order tor reduce the size of your image files.

So to do that, I'm going to install this imagemin node module as a global module.

So I type in sudo, since I'm using a Mac,

npm -g install imagemin-cli,

and then install this node module.

Sometimes on a Mac, some of the imagemin plugins do not get installed correctly.

So that's why I'm giving these additional flags to the command,

they're saying --unsafe-perm=true and --allow-root.

Once that installation is complete,

let me set up a script in order to do that magnification of my images.

Going to package.json again, I'm going to set up the next script here.

So I would say imagemin is the script name that I'm going to do,

and I would say imagemin.

And then since all my images are in the img folder, I would say img/*,

and then then many files are going to be copied to dist image.

So the original image files from the image folder that I have will be copied

into the distribution folder and into the image subfolder there.

So this completes my imagemin.

Let me proceed forward with the remaining set up, and

then we will see how we'll make use of the scripts that we have already set up there.

Now that I have the test folder in there, which I might create,

I don't want to check in the dist folder into my Git repository.

So that's why into my .gitignore file, I'm going to add in the dist folder also.

So the dist folder will be ignored when I do my check into the Git repository.

So let's save the changes, going back to package.json.

Now, what I'm going to do next is to install three different

node modules, which enable me to do the modifications

to my index.html file and the remaining HTML files there.

At the command prompt, type in npm install --save dev.

I'm going to install a module called as usemin-cli.

This usemin-cli is the one that allows me to do the transformation from my

HTML file.

And then concatenate and combine all the CSS

files into a single CSS file, and then put it into the distribution folder.

Similarly, all the JS files will be concatenated and put into a single folder.

So this usemin-cli is useful.

But this usemin-cli takes the help

of three other node modules called the cssmin,

then uglifyjs, and htmlmin.

So I need to install these three node modules in addition to usemin-cli.

And I'm going to install this locally into my project, so

that's why npm install --save-def.

So this way, they will be remembered in my package.json file.

So let's go ahead and complete the installation.

Now that I have installed the usemin and

the related node modules, I need to do some transformation

to my index.html file and the remaining HTML files.

Such that the usemin node_module recognizes that this group is

a bunch of CSS files that need to be compressed, calculated, and verified.

Similarly, this is the group of JavaScript files that need to be uglyfied,

combined, and concatenated together.

So to help the usemin package work,

I need to add in a little bit of code into my index.html file.

So right before the first link there,

I'm going to add in a mark up here,

which says !-- build:css.

Now, this !--, as you'll recognize,

is a comment from html perspective.

So inside that comment, I'm going to include that this particular line is

going to be used by the use menu in order to recognize the block of

code that specifies all the CSS files that need to be transferred.

So I say build.css, and then I will specify

the filename as css/main.css.

This is the syntax for specifying.

What this means is that these Block of CSS files will all be combined together,

and then concatenated, minified, and then put into this file called main.css.

And then this block will be identified on the other side by saying,

Hyphen --, okay, sorry.

I forgot to include double dash at the end there.

That's the reason why this was not turning colors.

So sometimes you are happy that your

editor is pointing out this potential mistakes that you might be committing.

So right there I would say endbuild and

then -- right bracket there.

Now, whatever is between this build and

endbuild, this group will be treated as a unit for

being combined by our usemin npm module there.

Watch the syntax the usemin module uses there.

I need to do the same transformation to contactus.html and aboutus.html also.

So I'm going to copy this one

here the lazy one that I am.

I will simply just copy and

paste into contactus.html and

then also aboutus.html there.

Similarly, going back to the index.html,

I'll copy this inbuild and then also copy that into

contactus.html and aboutus.html data.

Okay, let's save the changes to all the files.

Then, going to back to index.html.

I'm going to repeat the same thing at the bottom for my

JavaScript scripts that I've included there.

So, going to the bottom here,

what I need to do here,

is to specify <!-- build js,

and I will say js/main.js.

Double hyphen, slash.

So that's the starting of the block and then the ending is specified by,

Build, okay?

So with these changes, now, my index.html file is ready,

and I have to do the same transformation to contactus.html at the bottom.

And aboutus.html also at the bottom.

Similarly, this enbuild copied in.

Into contactus.html and aboutus.html and then save all the files.

And that prepares our HTML files for

being transformed to prepare the distribution folder.

These files will remain as such, but then the transformed files will be put into

the distribution folder created from these files.

Now, once we complete that, let's set up some scripts.

Going to package.json, I will set up my next script called usemin.

And then this says usemin,

contactus.html -d dist, this is the syntax for

specify -d dist meaning that the destination for

this distribution dist folder.

And then I would say htmlmin, this is also going to minimize the HTML file.

So it'll remove all the extraneous spaces and comments from the HTML file.

But they compress it down so

that it contains the minimum number of characters there.

We'll look at the result after we complete and do the transformation there.

So that and then, not only that,

and then htmlmin, and then say

-o dist/contactus.html and

&&, this means that there is

more to come after this.

Then I will say usemin

then aboutus.html

-d dist --htmlmin

-o dist/aboutus.html.

So that's the second one for transforming the aboutus.html file.

And then &&, this is a long script,

usemin index.html,

we need to transform all the files.

So that's why I need to specify each one explicitly there.

usemin doesn't take wild cards, so

that's the reason why I have to specify the holding like [INAUDIBLE].

And so usemin index.html

-d dist --htmlmin

-o dist/index.html.

And then after that I put a comma because I'm going to introduce the next script,

which is, Called build.

So this build script will create my distribution folder.

So to create my distribution folder,

the first thing that I'm going to do is npm run clean.

And then npm run copyfonts.

You have already seen these two in action earlier,

then I will say npm run imagemin to create the minimized images,

and then I would say npm run usemin.

And this particular script will build up my distribution folder,

the contents of which can then be copied to my web server to solve up my pitch.

Save the changes.

Let's now see how we build up the website.

At this point, to build up our website and

the command prompt is simply type npm run build and then just execute.

That script, which in turn will execute a set

of either scripts, which in turn will complete the entire set

of tasks that have to be executed in order to prepare my distribution folder.

So, let's go ahead and run this thing and

then this will run through all the different scripts there.

It takes a few minutes for it to complete, and when it is completed,

then your distribution folder will now be ready for deployment onto your web server.

Going to our editor,

you now see that the distribution folder is now ready.

Inside the distribution folder you will see the three index files,

and in the CSS folder, you will see the single file called m ain.css,

which contains all the Bootstraps CSS, the Bootstraps CSS,

and the CSS code that you have created.

And the JS folder will contain the main.js,

which contains the Bootstrap, the jQuery, and

all the whole bunch of JavaScript code combined together into one single file.

The image will contain the optimized images, and the fonts, obviously,

you have seen earlier, contain the font files.

Now, let's take a quick look at index.html that has been created here.

So when you look at the index.html that has been created here,

you will notice that the whole thing is literally unreadable,

because when you did HTML min it has stripped off all the extraneous

comments, it has stripped off all the spaces, and

then created this whole running set of characters.

To the computer it doesn't make any difference because it will render this

webpage just as well.

To you and me, it makes a difference, because we can't read this easily.

So this is what minification causes to your HTML file.

Let's take a look at the main.css.

When you look at the main.css you see the whole thing is crunched up

into one single unit, as you go to the bottom.

If you are brave enough, go down to the bottom and then you will see the,

You will see hours specifically written

CSS classes right down at the bottom here.

Right there, you recognize carousel button, and other things,

nabber-dark, and other things there, so it's all scrunched up into.

So that's what minification, and costs.

Main.js, same thing.

Unreadable code there.

Their computer, no difference.

So with this, our distribution folder is now complete.

Let's check out our distribution folder.

Fortunately, we have our light server already running.

So what I'm going to do is to go to the browser, and

then check out the index ready CLM file in this distribution folder to

see whether it is being rendered correctly or not.

Going to the browser, in my address bar I will type,

dist index.html, and

notice that this particular file is the distribution

file that has been created, and it contains exactly the same thing and

renders exactly the same way as our original webpage that we created.

About, similarly, notice that this aboutus.html is from the distribution

folder and this is rendered exactly as before,

and also the contactus.html file.

Everything works perfectly.

So now all that is left for you to do in order to deploy your webpage,

or your website, is to simply copy the contents from the dist folder,

and then upload it to your web server, and

then your web server is up and running, serving up your website.

With this, we complete this exercise.

In this exercise, we saw how we can make use of NBM

scripts in order to build and deploy our website.

This may be a good time for

you to do a Get Comment with message NPM Scripts, Part 2.

[MUSIC]

关于 Coursera

课程、专项课程和在线学位均由全世界一流大学和教育机构的顶尖授课教师教授。

Join a community of 40 million learners from around the world

Earn a skill-based course certificate to apply your knowledge

Gain confidence in your skills and further your career

Coursera 致力于普及全世界最好的教育，它与全球一流大学和机构合作提供在线课程。

© 2019 Coursera Inc. 保留所有权利。

通过 App Store 下载

通过 Google Play 获取