chapter-02.srt

1
00:00:00,057 --> 00:00:03,977
Chapter 02.
Executing a build by hand.

2
00:00:04,411 --> 00:00:09,165
So we have the code checked out over here.

3
00:00:10,354 --> 00:00:14,940
So we've got a couple of files.

4
00:00:15,100 --> 00:00:18,022
I know we're going to need
coffeescript and also uglify,

5
00:00:18,045 --> 00:00:23,977
so let's make a package.json
with those things in it.

6
00:00:24,270 --> 00:00:39,888
[Silence]

7
00:00:40,068 --> 00:00:43,234
TS: What will the package.json allow you to do?

8
00:00:43,230 --> 00:00:51,600
JG: Package.json is what npm
the node packaging system uses.

9
00:00:51,760 --> 00:00:58,217
And one of its functions is
to manage your dependencies.

10
00:00:58,210 --> 00:01:01,908
There are two sets of dependencies,
dependencies and dev-dependencies.

11
00:01:01,900 --> 00:01:05,371
Dependencies are things that your
program uses in run time in production,

12
00:01:05,370 --> 00:01:10,537
and dev-dependencies are things you use
for testing or examples, or what have you.

13
00:01:11,470 --> 00:01:17,200
So coffeescript and uglify are
not going to be part of the tool,

14
00:01:17,230 --> 00:01:19,051
they're things you can run with the tool.

15
00:01:19,097 --> 00:01:21,565
They'll be part of the examples so I'll put them in dev.

16
00:01:21,577 --> 00:01:23,497
TS: OK

17
00:01:24,560 --> 00:01:32,411
JC: So save that, and if you run
npm install it should install them for you.

18
00:01:32,457 --> 00:01:36,308
So that's good.

19
00:01:36,468 --> 00:01:43,508
Packages that provide executables
npm puts those in `node_modules/.bin`.

20
00:01:44,140 --> 00:01:47,222
And they just sit inside the project.

21
00:01:47,222 --> 00:01:54,811
So we should be able to compile each
of those things into a javascript file.

22
00:01:56,754 --> 00:01:59,874
And then minify them and concatenate the results.

23
00:01:59,870 --> 00:02:03,634
So were going to need to do...

24
00:02:04,480 --> 00:02:09,980
[James thinks]

25
00:02:13,348 --> 00:02:18,610
Let's make another directory inside there and move...

26
00:02:21,862 --> 00:02:25,942
Can I do it that way? We'll soon find out.

27
00:02:26,057 --> 00:02:28,548
TS: Looks like it.

28
00:02:28,822 --> 00:02:36,800
JC: OK so those are in source,
we'll make another directory called lib.

29
00:02:37,740 --> 00:02:43,234
So I want to run node modules.bin with coffee...

30
00:02:47,977 --> 00:02:51,497
I want to compile and put the output in example lib.

31
00:02:51,580 --> 00:02:56,560
And compile example source
with complimenter coffee.

32
00:02:58,377 --> 00:02:59,462
TS: So what's that done?

33
00:02:59,485 --> 00:03:04,354
JC: That should have compiled that
file in to the example lib directory.

34
00:03:04,350 --> 00:03:08,582
So that has showed up.

35
00:03:09,485 --> 00:03:14,765
Look at example source
complimenter that has some code in it.

36
00:03:14,910 --> 00:03:20,114
So example lib complimenter should
look the same, but in  JavaScript.

37
00:03:20,160 --> 00:03:24,388
That does look reasonable.

38
00:03:26,320 --> 00:03:30,548
And then we'll do the same with the other file.

39
00:03:30,685 --> 00:03:33,611
[James types]

40
00:03:38,582 --> 00:03:41,325
I'll use hello.

41
00:03:41,490 --> 00:03:45,136
[Silence]

42
00:03:45,210 --> 00:03:47,314
So that's compiled it.

43
00:03:47,348 --> 00:03:55,154
So the next thing to do with those files .... [he thinks].

44
00:03:56,940 --> 00:04:04,205
Given that one of the requirements of
the brief is that the build should be lazy,

45
00:04:04,731 --> 00:04:08,582
and only do steps when they're required.

46
00:04:10,560 --> 00:04:16,891
The way that make does that is, any
intermediate results, you put in files.

47
00:04:16,910 --> 00:04:20,297
Because  it can then check
the modified time of the files,

48
00:04:20,320 --> 00:04:26,251
and if it's less recent, than any of the
inputs to that file, it will rebuild it.

49
00:04:26,400 --> 00:04:32,148
So, to minify something...

50
00:04:33,120 --> 00:04:38,816
Again, we can use things in
node_modules/... We run uglify with...

51
00:04:41,470 --> 00:04:49,634
I think it's these flags.
Those flags have compress which is...

52
00:04:49,630 --> 00:04:54,822
Let's see what the help says.

53
00:04:54,820 --> 00:04:59,485
[Thinking]

54
00:04:59,480 --> 00:05:02,608
And I have to run it with --help

55
00:05:02,914 --> 00:05:09,005
[Silence]

56
00:05:09,090 --> 00:05:18,148
So "–c" enables compressor options.
You have to tell that to make it minify the file.

57
00:05:18,140 --> 00:05:19,760
TS: Right.

58
00:05:19,760 --> 00:05:25,542
JC: The option called m has not been found.

59
00:05:25,600 --> 00:05:31,748
It's up there... It's mangle... Which means
it will do things like shrink variable names.

60
00:05:32,228 --> 00:05:35,920
And "–o" is for output;
so, where to put the resulting file.

61
00:05:35,970 --> 00:05:38,868
TS: So is uglify going to be
responsible for concatenating these,

62
00:05:38,868 --> 00:05:42,331
or does concatenation
come after the uglification?

63
00:05:42,450 --> 00:05:47,154
JC: That's the bit I'm not sure about actually.

64
00:05:47,485 --> 00:05:52,045
Whether you can give it multiple input files
and have it write them all to the same place.

65
00:05:52,040 --> 00:05:55,645
TS: It seems that the
coffeescript compiler is one to one.

66
00:05:55,680 --> 00:05:58,000
You give it one coffee-script
file and one JavaScript file.

67
00:05:58,000 --> 00:06:00,731
JC: Exactly.

68
00:06:00,730 --> 00:06:06,262
So the first line here says the usage
is that it can take multiple input files.

69
00:06:06,260 --> 00:06:09,954
So why don't we try to get it to do that.

70
00:06:10,770 --> 00:06:12,822
I'll just remove those.

71
00:06:13,420 --> 00:06:18,754
cmo example/bundle.js

72
00:06:18,891 --> 00:06:23,748
example/lib/*

73
00:06:24,030 --> 00:06:26,697
And we'll see what goes on in there.

74
00:06:30,411 --> 00:06:35,222
OK that looks like it has some code in it.

75
00:06:36,582 --> 00:06:43,714
It will have mangled all the names and everything
so whatever I was looking for in here...

76
00:06:45,210 --> 00:06:48,480
It will only reduce the size of local variables,

77
00:06:48,500 --> 00:06:50,857
because it doesn't matter
what those are externally,

78
00:06:50,880 --> 00:06:52,240
but method name should stay the same.

79
00:06:52,280 --> 00:06:57,954
So I think there is a say... Yes, there's
some say method being defined there.

80
00:06:59,725 --> 00:07:01,531
And it's got that code in it that we wanted.

81
00:07:01,530 --> 00:07:07,691
So this looks like the output
that we want to produce.

82
00:07:09,211 --> 00:07:14,120
TS: Whats the trade off between concatenating
and minifying them all in one step versus...

83
00:07:14,120 --> 00:07:16,285
I presume if you wanted  to,
you could minify them separately

84
00:07:16,297 --> 00:07:19,340
and then post-process them
to concatenate them together,

85
00:07:19,360 --> 00:07:24,114
or is it necessary for them
to be minified all together?

86
00:07:24,840 --> 00:07:29,942
JC: I think there are certain optimisations you
can do by considering things like – in total.

87
00:07:29,954 --> 00:07:36,171
And because there are various different work-flows
for JavaScript. Like if you've got all your...

88
00:07:38,491 --> 00:07:41,451
Depending on which of the
various module formats you're using...

89
00:07:41,474 --> 00:07:46,148
Like, you might have used a tool
to resolve all of those modules,

90
00:07:46,160 --> 00:07:49,851
and in-line them before you
did the coffee-script compilation.

91
00:07:49,860 --> 00:07:51,942
Or if you're using something like Browserify,

92
00:07:51,954 --> 00:07:57,165
you can give it a plug-in that
will convert coffee-script on the fly.

93
00:07:57,234 --> 00:07:58,571
Or you can do them in separate steps,

94
00:07:58,600 --> 00:08:02,528
like compile all your coffee-script and
then get Browserify to resolve everything.

95
00:08:02,537 --> 00:08:04,530
TS: Fine.

96
00:08:06,080 --> 00:08:09,097
JC: Yes, they're usually...

97
00:08:10,450 --> 00:08:15,200
I think that the workflow a lot of people
are using these days is Browserify or Webpack,

98
00:08:15,248 --> 00:08:17,000
or something like that.

99
00:08:17,000 --> 00:08:19,851
But minifying the individual files
and then concatenating them

100
00:08:19,860 --> 00:08:26,336
will usually be the roughly the same
as getting the tool to do it for you.

101
00:08:27,497 --> 00:08:30,742
TS: So you're happy with this chain of
operations in order to produce the output?

102
00:08:30,765 --> 00:08:31,330
JC: Yes.