Preview
Video Player
00:00
00:00
Creating Your Own Arbitrary Tasks
7:37npm is flexible enough to allow you to create your own tasks.
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