"Node.js Basics 2017" was retired on September 1, 2022. You are now viewing the recommended replacement.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Using npm as a Task Runner!
You have completed Using npm as a Task Runner!
Preview
npm is flexible enough to allow you to create your own tasks.
Links
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
We've seen how to create and
run a built-in task.
0:00
Now, let's create a task
with the name of our choice.
0:04
We're going to be using
the uglify package.
0:08
This is an npm module that combines and
minifies JavaScript code.
0:11
We can use it's combined
multiple JavaScript files and
0:17
make the code smaller for
faster delivery to our site's visitors.
0:19
In my source folder,
0:25
I have a models folder
with the dice.js file.
0:27
This contains all the JavaScript code for
generating a random number for a dice.
0:33
And here we have a frontend.js file
which sets up the application for
0:40
our index.html file.
0:44
If we take a look in the index.html
file it's expecting an app.js file.
0:47
In other words during development we're
working on two JavaScript files, dice and
0:54
frontend.js.
0:59
But for production and deployment,
we need a single file named app.js,
1:01
that the index.html file loads and uses.
1:05
We can combine these files using uglify.
1:11
To use uglify in the command line,
1:15
we type node_modules/.bin/uglifyjs,
1:20
which is the command src/models/*
1:26
src/frontend.js which are all
1:32
the files in the models folder,
1:37
and then the frontend.js file,
1:42
then the flags -m and -c.
1:47
The -m flag mangles or reduces the name
of some of the variables in the code,
1:51
and the -c flag combines
the code into a single file.
1:56
Finally, we pass in the output
flag with the file name,
2:02
where we want it to be saved to.
2:08
Build is the folder where we're saving
our project for deployment or production.
2:11
Don't worry too much
about how uglify works.
2:18
I've included links to this
module in the Teacher's Notes.
2:21
The important thing to realize is that
there's this long line of command line
2:25
code that we have to type in each time we
want to get our JavaScript files ready for
2:29
the server.
2:34
Memorizing this command or running it
over and over again, manually typing
2:36
in by hand, is time consuming, and
will break with the smallest typo.
2:39
We can create our own task to avoid
mistakes and simplify the command.
2:45
Let's call our task uglify.
2:51
We can copy and
paste our command from before
3:04
To run this task we type npm run.
3:12
Remember you need to use the run command
since this is not a built-in task.
3:20
And then its name, uglify.
3:24
>> Look.
3:36
It's created a single app.js
file in the build folder.
3:38
All the code has been compressed and
mangled onto one line.
3:43
We're missing our CSS and
HTML in our build folder.
3:48
We could manually copy and paste that
code over, but npm allows you to
3:52
run any command line command,
like the cp, or copy command.
3:58
Let's create a new task called copy-files.
4:04
We can put what we'd normally
put in the terminal here.
4:18
Cp src/*.html, and
4:23
then the destination folder,
4:26
which is build.
4:31
And cp src/*.css and
4:34
then the build folder again.
4:38
This will copy both the HTML and
CSS files into the build directory.
4:45
So, let's try it out by typing,
npn run copy-files.
4:50
And it copied the files
into the build folder.
5:06
Now, I don't want to be
running the uglify task and
5:10
the copy-files task every time I want
to deploy or view it in the browser.
5:13
I just want to single task to do that.
5:19
Let's call it build.
5:22
All we have to do is add
5:29
"npm run copy-files and
5:33
&& npm run uglify"
5:38
If you use double ampersand, the two
commands will run one after another.
5:45
If you use a single ampersand,
the commands will run at the same time.
5:51
Copying files of different types
can be done in parallel and
5:57
they won't have any real
impact on each other.
6:00
However I want each of
the scripts to run sequentially.
6:03
So if one fails I know where it failed.
6:07
I will then know where I need
to go to clean up any files or
6:10
fix any issues in the given
step that causes the issues.
6:13
Let's clear the build directory
by typing rm build/*.
6:18
And type, npm run build.
6:23
As you can see it runs both the copy-file
script and the uglify script.
6:31
Our app is now ready to be deployed.
6:36
To take this project further you could
create a test that clears the build folder
6:39
instead of manually doing rmbuild/*.
6:43
Really the possibilities are endless for
you to create your own tasks.
6:47
There are several other default npm tasks.
6:52
You can see a list of them by
typing npm help scripts, or
6:56
visiting the npm documentation site.
7:00
I've linked that in the Teacher notes.
7:03
Npm is not only a powerful
dependency manager but
7:06
it's also a flexible way to issue
commands to your computers command line.
7:09
The choice is up to you and
you can program it your way and
7:14
you don't have to deal with the overhead
of a build system like gulp or grunt.
7:17
You can even use Unix commands
you're already familiar with.
7:22
If you're running this on Windows,
you can use the command prompt and
7:26
the Windows command tools
to create your tasks.
7:29
I hope you enjoyed this and
let me know how you're going to use npm.
7:33
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up