1
00:00:00,025 --> 00:00:04,195
[SOUND] Hello there, I'm Andrew, and

2
00:00:04,195 --> 00:00:10,198
welcome to this workshop on
using npm as a task runner.

3
00:00:10,198 --> 00:00:13,560
A task is something that you need to do.

4
00:00:13,560 --> 00:00:16,520
If you want to perform that task over and
over again,

5
00:00:16,520 --> 00:00:20,239
you'll save yourself a lot of time
if you alternate the process.

6
00:00:20,239 --> 00:00:23,598
Common web development tests
include running test suites.

7
00:00:23,598 --> 00:00:26,639
Compiling SaaS, TypeScript and
CoffeeScript files.

8
00:00:26,639 --> 00:00:31,178
Downloading assets of files from an
external source that your package needs.

9
00:00:31,178 --> 00:00:33,138
Starting a web server.

10
00:00:33,138 --> 00:00:36,651
And starting a worker that
goes through a queue of jobs,

11
00:00:36,651 --> 00:00:39,730
like sending out emails or
push notifications.

12
00:00:40,930 --> 00:00:46,260
Popular jump script build tools like grunt
and group are good for complex projects.

13
00:00:46,260 --> 00:00:48,080
But you don't always need that power or

14
00:00:48,080 --> 00:00:51,860
want to bother with the time consuming
set up process that they require.

15
00:00:53,100 --> 00:00:56,350
You can always turn to
a full feature build system

16
00:00:56,350 --> 00:00:58,279
later as your project evolves.

17
00:00:59,740 --> 00:01:01,940
npm tests are called scripts, and

18
00:01:01,940 --> 00:01:07,310
they're added to the scripts property
of a project's package.json file.

19
00:01:07,310 --> 00:01:11,230
Tasks have a name and a command,
which is simply a string that's

20
00:01:11,230 --> 00:01:15,610
executed on the operating system's
command line when the task is run.

21
00:01:16,650 --> 00:01:22,520
For example, you could echo out a message
to the terminal, start up a web server,

22
00:01:22,520 --> 00:01:28,330
or use a command line like mv to
move files, or cp to copy files.

23
00:01:28,330 --> 00:01:30,370
I'll show you a few examples in a moment.

24
00:01:32,150 --> 00:01:36,590
Once you have the script added to the
package.json file, you can run it simply

25
00:01:36,590 --> 00:01:42,380
by typing npm run, the name of the script
in your computer's command line tool.

26
00:01:43,580 --> 00:01:50,290
For example, if you had a task named test,
you'd run it by typing npm run test.

27
00:01:51,580 --> 00:01:55,250
Or if I had a script named compile,
that compiles CSS files,

28
00:01:55,250 --> 00:01:57,430
I'd run it with npm run compile.

29
00:01:59,190 --> 00:02:01,818
I'll focus on two types of task with MPM.

30
00:02:01,818 --> 00:02:06,275
Default, or built-in tasks,
and arbitrary tasks.

31
00:02:06,275 --> 00:02:10,430
Built-in tasks are those that
are common to most projects.

32
00:02:11,470 --> 00:02:14,385
An example of a built-in task is "test".

33
00:02:14,385 --> 00:02:18,510
Built-in tasks do not
require the run command.

34
00:02:18,510 --> 00:02:24,000
So npm run test can also
be ran as npm test.

35
00:02:24,000 --> 00:02:28,168
That saves a couple of keystrokes
every time you want to run your tests.

36
00:02:28,168 --> 00:02:32,368
Arbitrary tasks are those
that you can name yourself.

37
00:02:32,368 --> 00:02:35,356
They require npm’s run command.

38
00:02:35,356 --> 00:02:40,340
Since there's no built-in compile task,
if you added your own

39
00:02:40,340 --> 00:02:45,540
script with that name,
you'd read it like this, npm run compile.

40
00:02:46,860 --> 00:02:52,138
Not all JavaScript applications will need
custom or arbitrary tasks like this,

41
00:02:52,138 --> 00:02:56,578
since the built-in task cover many
of the most common situations.

42
00:02:56,578 --> 00:03:00,179
Here's the simple project
we're building in this video.

43
00:03:00,179 --> 00:03:03,530
Dice Simulator 2015 is the latest craze.

44
00:03:03,530 --> 00:03:05,740
You click the button and
it rolls the dice.

45
00:03:06,810 --> 00:03:08,740
This project is a front end project.

46
00:03:09,890 --> 00:03:14,320
When I say we'll be building this, I don't
mean that we'll be programming this.

47
00:03:14,320 --> 00:03:16,340
All the programming has been done, but

48
00:03:16,340 --> 00:03:18,770
we'll be getting the project
ready to deploy.

49
00:03:19,990 --> 00:03:23,300
Open up the associated work space
with this video and we'll get going.

50
00:03:24,770 --> 00:03:27,760
Let's take a look at the start
point of this project.

51
00:03:27,760 --> 00:03:31,360
We have a srcc folder or source folder.

52
00:03:31,360 --> 00:03:34,950
A test folder, with a simple test for
this application.

53
00:03:36,380 --> 00:03:40,860
And we can use npm's built
in test task for this.

54
00:03:40,860 --> 00:03:45,500
Let's jump in quickly to the package.json
file and see what's going on in there.

55
00:03:47,440 --> 00:03:50,285
We'll be using Mocha as
our test library and

56
00:03:50,285 --> 00:03:54,960
UglifyJs to combine our JavaScript
files into one app.js file.

57
00:03:56,430 --> 00:04:00,590
The scripts object has a test task.

58
00:04:00,590 --> 00:04:05,260
If you don't specify your test, it prints
out, Error: no test specified, and

59
00:04:05,260 --> 00:04:08,780
it exits with a 1,
meaning something went wrong.

60
00:04:08,780 --> 00:04:13,145
Computer programs successfully
run exits with the code of 0.

61
00:04:14,170 --> 00:04:18,620
The thing that's wrong here,
is that we have no test set up.

62
00:04:18,620 --> 00:04:20,470
We'll do that in the next video.