chapter-03.srt

1
00:00:00,000 --> 00:00:03,954
Chapter 03.
Automating build steps with a shell script.

2
00:00:04,400 --> 00:00:14,960
OK so we know the things that we
want to run... We have the rough steps.

3
00:00:15,000 --> 00:00:19,965
So for example, if I wrote this as a shell script...

4
00:00:20,125 --> 00:00:26,480
[Silence]

5
00:00:26,530 --> 00:00:38,880
We know that we want to run
node_modules/.bin/coffee-script

6
00:00:40,468 --> 00:00:54,960
With compiler and put the output in example/lib
with example source complimenter.coffee

7
00:00:57,634 --> 00:01:02,000
And then we also want to do that for...

8
00:01:02,160 --> 00:01:04,400
Have I got coffee?

9
00:01:08,270 --> 00:01:14,994
Before we do that it would be a good idea to
make sure that the output directory exists.

10
00:01:16,548 --> 00:01:22,022
So we'll do that and then compile the coffeescripts.

11
00:01:22,434 --> 00:01:26,045
Once we have those...

12
00:01:27,257 --> 00:01:30,080
Uglifyjs.

13
00:01:30,330 --> 00:01:34,628
[Silence]

14
00:01:34,720 --> 00:01:38,594
Put the examples in there.

15
00:01:41,130 --> 00:01:46,091
We want to combine all the
JavaScript files from example/lib

16
00:01:46,170 --> 00:01:50,377
into a single file called
example/bundle.js so we get all those.

17
00:01:50,460 --> 00:01:57,394
TS: The order of those files doesn't matter?
We're happy just to take them in presumably...

18
00:01:57,400 --> 00:02:03,588
JC: It doesn't matter in this case because
each file... Well if we have a look at the files.

19
00:02:07,920 --> 00:02:11,440
So this file declares a class called complimenter.

20
00:02:11,960 --> 00:02:20,925
And it makes one of them
and it console logs its say method.

21
00:02:21,900 --> 00:02:27,520
and the other one, example source
hello does much the same thing,

22
00:02:27,565 --> 00:02:34,750
it just has a different implementation
for what its say method does.

23
00:02:37,760 --> 00:02:41,622
These files do have side effects because they
log stuff but they don't depend on each other.

24
00:02:41,630 --> 00:02:47,337
If you're expecting the output to be
in a certain order... Maybe it depends...

25
00:02:49,320 --> 00:02:53,165
If I was going to force a dependency
order, I would use node modules,

26
00:02:53,170 --> 00:02:59,474
or the new module syntax that's in ECMAScript 6.

27
00:02:59,620 --> 00:03:04,571
And then get Babel or Browserify
or something like that to resolve it,

28
00:03:04,594 --> 00:03:09,920
so that the dependency was part of
the source code, not part of the build.

29
00:03:12,868 --> 00:03:17,165
OK, so we have our build script.

30
00:03:18,354 --> 00:03:22,194
Those were the steps that we did before.

31
00:03:26,720 --> 00:03:37,177
If I remove the compiled JavaScript and the bundle,
then running that should produce the same result.

32
00:03:40,650 --> 00:03:45,005
Util.error: Use console.error instead. [James thinks]

33
00:03:45,810 --> 00:03:50,205
It couldn't find ./node_modules/.bin/coffee-script.

34
00:03:53,028 --> 00:03:56,194
Why can it not find that?

35
00:03:58,971 --> 00:04:02,114
Oh it's because it's just called coffee, OK.

36
00:04:02,331 --> 00:04:11,485
[Silence]

37
00:04:11,480 --> 00:04:15,165
OK... Let's try that again.

38
00:04:17,640 --> 00:04:24,045
I think maybe I should show the tree before
and after because it shows the actual difference.

39
00:04:24,125 --> 00:04:28,628
So move the bundle and the compiled code.

40
00:04:28,620 --> 00:04:35,600
So the tree before has just got our
source code in it. And if we run the build...

41
00:04:36,510 --> 00:04:38,662
And that did something.

42
00:04:38,811 --> 00:04:44,160
And now there are the compiled
JavaScript files in there, and the bundle.

43
00:04:45,790 --> 00:04:48,091
And that is how we were expecting it to look.

44
00:04:48,137 --> 00:04:55,040
TS: Great, does this count as a solution to the problem?
JC: Done! Success.

45
00:04:55,325 --> 00:05:02,731
So a totally reasonable solution to a
lot of problems is just write a shell script.

46
00:05:02,857 --> 00:05:09,268
But there's a bunch of ways that the
shell script doesn't meet the brief, so far.

47
00:05:10,742 --> 00:05:16,502
We had to make it lazy so it won't do work it doesn't need to.

48
00:05:18,617 --> 00:05:23,154
And it has to be able to
orchestrate arbitrary commands.

49
00:05:23,417 --> 00:05:26,765
[James thinks]

50
00:05:30,331 --> 00:05:38,182
What we just did was figure out what needs to be done
and then told the computer to do those things.

51
00:05:40,140 --> 00:05:45,314
Whereas you want a build
system to be smarter than that

52
00:05:45,348 --> 00:05:51,930
and you tell it what your project is and how it's
structured, and it figures out how to build it.

53
00:05:55,748 --> 00:05:59,770
If you haven't changed any of your
coffee script since you last ran the build,

54
00:05:59,794 --> 00:06:02,697
don't bother running the compiler again.

55
00:06:02,754 --> 00:06:05,828
And if you haven't changed any
of your files since the last time

56
00:06:05,850 --> 00:06:07,908
don't bother running the entire process again.

57
00:06:07,931 --> 00:06:14,754
And you want that to be quite granular so it
can figure out which bits of work need doing.

58
00:06:15,028 --> 00:06:20,137
And just run those bits but make sure
you get something up to date each time.

59
00:06:23,702 --> 00:06:35,565
We want a system where we can say
lib/hello.js is derived from src/hello.coffee

60
00:06:36,170 --> 00:06:41,570
and then it can look to see if hello.coffee
is newer than hello.js and recompile it if it is.

61
00:06:41,680 --> 00:06:44,580
TS: So part of that is generalizing
the idea of how do you turn...

62
00:06:44,580 --> 00:06:47,531
Because at the moment you've told it
how to turn coffee script into Java Script twice,

63
00:06:47,542 --> 00:06:49,428
once for each file right?
JC: Right

64
00:06:49,451 --> 00:06:55,131
You want it to understand in general, how to turn
any coffee script file into any JavaScript file.

65
00:06:55,130 --> 00:07:02,194
JC: Right, and to have it understand
this file was derived from this other file.

66
00:07:02,240 --> 00:07:06,857
And like I said before, it can check
the modification time of two files,

67
00:07:06,880 --> 00:07:11,417
and if the output is at least as new
as the input it doesn't need to do anything.

68
00:07:11,410 --> 00:07:13,542
TS: OK.

69
00:07:13,800 --> 00:07:18,777
JC: So there's an intermediate step
there where I've repeated this instruction.

70
00:07:18,800 --> 00:07:26,342
and you can (sort of) solve that with a bash loop.

71
00:07:26,640 --> 00:07:31,725
[Silence]

72
00:07:33,080 --> 00:07:39,028
So if we take that and just
shove file on the end of there.

73
00:07:39,120 --> 00:07:42,022
And get rid of this.

74
00:07:42,274 --> 00:07:47,120
This ought to do the same thing,
if we remove everything.

75
00:07:48,091 --> 00:07:51,405
Check the example, run the build...

76
00:07:52,200 --> 00:07:54,125
Check the example again. It does the same thing.

77
00:07:54,140 --> 00:07:59,771
So we've made a slight improvement
to how much boilerplate we've written.

78
00:07:59,817 --> 00:08:04,811
But this isn't lazy.

79
00:08:04,810 --> 00:08:12,857
It will run this line every time. So as your project
grows this will get slower and what have you.

80
00:08:20,171 --> 00:08:23,474
There's a lot of things that we
still want, so where do we start.

81
00:08:23,470 --> 00:08:31,302
I guess the simplest thing is to
have something where you can say...

82
00:08:31,782 --> 00:08:35,394
There's a file I want to build
and this is how to build it.

83
00:08:35,417 --> 00:08:42,308
And have those be things a user can
specify. So maybe that's the place to start.

84
00:08:45,862 --> 00:08:48,720
TS: So that's ignoring the laziness
stuff you were talking about

85
00:08:48,742 --> 00:08:55,680
and just concentrating on how do I get this
hello.js given that I have hello.coffee.

86
00:08:55,885 --> 00:09:00,457
JC: Well maybe even not given that I have
hello.coffee just how do I make hello.js

87
00:09:00,450 --> 00:09:06,994
and then the idea that it's derived from some
other files, and the system knows about that,

88
00:09:07,097 --> 00:09:09,474
can maybe be the next step.