1
00:00:00,000 --> 00:00:04,674
[MUSIC]

2
00:00:04,674 --> 00:00:08,968
Cho đến nay, chúng tôi đã tập trung vào việc thiết kế và

3
00:00:08,968 --> 00:00:14,540
triển khai trang web của chúng tôi, có thể là HTML, CSS, hoặc mã JavaScript.

4
00:00:16,170 --> 00:00:21,890
Một khi trang web của bạn đã sẵn sàng, bước tiếp theo là có thể xây dựng trang web của bạn và

5
00:00:21,890 --> 00:00:26,010
triển khai nó vào một máy chủ web, để nó trở nên công khai.

6
00:00:27,300 --> 00:00:30,750
Sau đó, bộ thứ hai của chúng tôi các bước mà chúng tôi cần phải trải qua trước khi

7
00:00:30,750 --> 00:00:34,580
trang web của bạn đã sẵn sàng để triển khai trên một máy chủ web.

8
00:00:34,580 --> 00:00:39,079
Đây là những gì chúng ta sẽ xem xét trong bài học này và bài học tiếp theo.

9
00:00:40,915 --> 00:00:43,479
Như tôi đã đề cập, phát triển web và triển

10
00:00:43,479 --> 00:00:47,870
khai liên quan đến rất nhiều nhiệm vụ lặp đi lặp lại.

11
00:00:47,870 --> 00:00:54,820
Rõ ràng, việc viết mã HTML/CSS và JavaScript là một phần của nó.

12
00:00:54,820 --> 00:00:57,600
Nhưng phần khác là thực tế là nếu bạn viết

13
00:00:59,200 --> 00:01:04,170
mã CSS bằng cách sử dụng một trong các ngôn ngữ tiền xử lý CSS, như Sass hoặc L

14
00:01:04,170 --> 00:01:09,200
ess, thì bạn cần chuyển đổi mã đó thành mã CSS tương ứng.

15
00:01:09,200 --> 00:01:14,614
Sau đó, bạn cần phải thực hiện xử lý bổ sung trên các

16
00:01:14,614 --> 00:01:20,810
tập tin CSS của bạn như thu nhỏ, nén và nối.

17
00:01:20,810 --> 00:01:24,850
Chúng ta sẽ nói thêm một chút về những điều này trong vài slide tiếp theo.

18
00:01:24,850 --> 00:01:30,090
Tương tự như vậy, với mã JavaScript của bạn, bạn cần phải làm

19
00:01:30,090 --> 00:01:34,580
JShinting, kiểm tra các lỗi tiềm ẩn.

20
00:01:34,580 --> 00:01:40,590
Sau đó nối các tập tin kịch bản khác nhau và

21
00:01:40,590 --> 00:01:45,100
sau đó thậm chí uglification và mangling của mã.

22
00:01:45,100 --> 00:01:49,240
Chúng ta sẽ nói một chút về điều đó trong vài slide tiếp theo.

23
00:01:49,240 --> 00:01:54,889
Tất cả những nhiệm vụ này là những nhiệm vụ lặp đi lặp lại, mà chúng tôi muốn tự động hóa

24
00:01:54,889 --> 00:02:00,536
càng nhiều càng tốt, để chúng tôi có thể tập trung vào việc thiết kế thực tế và

25
00:02:00,536 --> 00:02:05,730
xây dựng trang web của chúng tôi, chứ không phải là những nhiệm vụ lặp đi lặp lại.

26
00:02:05,730 --> 00:02:09,623
Vì vậy, nguyên tắc DRY, không lặp lại nguyên tắc chính mình,

27
00:02:09,623 --> 00:02:11,840
là rất cần thiết trong trường hợp này.

28
00:02:11,840 --> 00:02:16,840
Chúng tôi không muốn lãng phí thời gian của mình vào các nhiệm vụ đốt lặp đi lặp lại như vậy,

29
00:02:16,840 --> 00:02:20,140
và thay vào đó, cố gắng tự động hóa chúng càng nhiều càng tốt để

30
00:02:20,140 --> 00:02:23,410
chúng có thể được thực hiện bất cứ khi nào cần thiết.

31
00:02:23,410 --> 00:02:27,649
Hãy nói về một số nhiệm vụ lặp đi lặp lại một chút chi tiết hơn.

32
00:02:28,950 --> 00:02:33,580
Hãy lấy ví dụ về CSS như một trường hợp.

33
00:02:33,580 --> 00:02:37,470
Khi viết mã CSS, chúng ta thường viết mã

34
00:02:37,470 --> 00:02:41,440
bằng cách sử dụng một trong những ngôn ngữ tiền xử lý thích Less hay Sass.

35
00:02:41,440 --> 00:02:46,920
Bây giờ một khi mã được viết, sau đó nó cần phải được chuyển đổi thành CSS bằng cách sử

36
00:02:46,920 --> 00:02:52,460
dụng một trong những preprocessor như chúng ta đã thấy trong bài học trước đó.

37
00:02:54,130 --> 00:02:59,660
Ở đó, chúng ta có thể cần phải làm một số tiền tố cụ thể của nhà cung cấp cho

38
00:02:59,660 --> 00:03:06,300
mã CSS của chúng tôi để giải quyết các vấn đề có thể phát sinh với các trình duyệt khác nhau.

39
00:03:06,300 --> 00:03:12,599
Vì vậy, đây là nơi mà nhiệm vụ làm tiền tố tự động được sử dụng,

40
00:03:12,599 --> 00:03:16,980
theo đó điều này có thể được tự động thực hiện cho chúng tôi.

41
00:03:16,980 --> 00:03:20,430
Tương tự như vậy, một khi mã CSS của bạn được viết, rõ ràng,

42
00:03:20,430 --> 00:03:26,010
cách chúng tôi viết mã CSS là để con người có thể đọc được.

43
00:03:26,010 --> 00:03:30,550
Nhưng đối với một máy, nó không thực sự quan tâm liệu có đủ khoảng trống

44
00:03:30,550 --> 00:03:34,000
giữa mã hoặc liệu nó có được định dạng đúng hay không.

45
00:03:35,100 --> 00:03:41,274
Vì vậy, thu nhỏ là quá trình loại bỏ tất cả các ký tự không cần

46
00:03:41,274 --> 00:03:46,080
thiết, khoảng trắng, dòng mới, nhận xét, từ mã CSS của bạn.

47
00:03:46,080 --> 00:03:51,280
Vì vậy, kết quả cuối cùng của bạn là một tập tin rất nhỏ gọn với số

48
00:03:51,280 --> 00:03:56,306
lượng ký tự tối thiểu, do đó có thể được phục vụ rất, rất nhanh chóng.

49
00:03:56,306 --> 00:03:57,812
Nhưng đồng thời,

50
00:03:57,812 --> 00:04:03,099
bạn muốn bảo tồn các chức năng mà bạn đã thiết kế trong mã CSS của bạn.

51
00:04:04,550 --> 00:04:09,140
Tương tự như vậy, bạn có thể phân phối mã CSS của bạn vào nhiều tập tin,

52
00:04:09,140 --> 00:04:12,870
trong khi bạn đang thiết kế và xây dựng trang web của bạn.

53
00:04:12,870 --> 00:04:17,620
Bạn có thể muốn nối tất cả chúng vào một tập tin CSS duy nhất ở cuối,

54
00:04:17,620 --> 00:04:21,430
do đó chỉ có một tập tin CSS duy nhất cần được tải xuống

55
00:04:21,430 --> 00:04:25,290
bởi trình duyệt khi nó đang hiển thị trang web của bạn.

56
00:04:25,290 --> 00:04:27,150
Vì vậy, nối là

57
00:04:27,150 --> 00:04:32,340
một nhiệm vụ khác có liên quan khi bạn đang xây dựng trang web của mình.

58
00:04:33,660 --> 00:04:38,940
Tương tự như vậy, khi bạn viết mã JavaScript, cho dù đó là JavaScript thuần túy hay

59
00:04:38,940 --> 00:04:44,800
jQuery hay một trong những khuôn khổ mà chúng tôi sẽ sử dụng trong

60
00:04:44,800 --> 00:04:50,640
các khóa học tương lai của chuyên môn hóa này, bạn sẽ cần phải viết mã JavaScript.

61
00:04:50,640 --> 00:04:53,550
Vì vậy, một khi bạn đã viết mã JavaScript, bạn sẽ muốn có thể kiểm tra

62
00:04:53,550 --> 00:04:57,510
mã JavaScript cho các lỗi và các vấn đề tiềm ẩn.

63
00:04:57,510 --> 00:05:00,576
Những thứ như thiếu dấu chấm phẩy,

64
00:05:02,810 --> 00:05:09,030
sử dụng không đúng ngôn ngữ, và như vậy, vì vậy những gì chúng ta gọi là phân tích mã tĩnh.

65
00:05:09,030 --> 00:05:13,490
Vì vậy, nếu bạn muốn có thể thực hiện điều này, ngay cả trước khi chúng tôi triển khai

66
00:05:14,830 --> 00:05:18,180
trang web của chúng tôi trên máy chủ web.

67
00:05:18,180 --> 00:05:23,379
Tương tự như vậy, chúng tôi có thể tổ chức mã của chúng tôi thành nhiều tập tin JavaScript.

68
00:05:23,379 --> 00:05:28,135
Khi chúng tôi thực sự triển khai, chúng tôi có thể muốn nối tất cả các tập tin này vào

69
00:05:28,135 --> 00:05:33,515
một tập tin JavaScript duy nhất và sau đó sử dụng nó trong các trang web của chúng tôi.

70
00:05:33,515 --> 00:05:36,775
Và nối này có thể được thực hiện tự động.

71
00:05:36,775 --> 00:05:42,340
Tương tự như vậy, uglification của mã JavaScript, viết tắt của

72
00:05:42,340 --> 00:05:46,720
minification, có nghĩa là loại bỏ tất cả các không gian trắng và

73
00:05:46,720 --> 00:05:48,880
bình luận không cần thiết và vân vân.

74
00:05:48,880 --> 00:05:53,670
Và sửa đổi mã, có nghĩa là giảm tên của các

75
00:05:53,670 --> 00:05:58,100
biến địa phương thành các chữ cái duy nhất bất cứ nơi nào khả thi.

76
00:05:58,100 --> 00:06:01,562
Bây giờ, từ góc nhìn của một máy tính,

77
00:06:01,562 --> 00:06:06,790
nó không thực sự quan tâm đến mã trông như thế nào miễn là nó hoạt động chính xác.

78
00:06:06,790 --> 00:06:12,230
Đối với định dạng có thể đọc được của con người, chúng tôi rõ ràng viết mã một

79
00:06:12,230 --> 00:06:17,960
cách phức tạp hơn rất nhiều, do đó nó dễ dàng hơn cho chúng tôi để làm theo những gì các mã đang làm.

80
00:06:17,960 --> 00:06:19,620
Vì vậy, khi bạn thực sự triển khai,

81
00:06:19,620 --> 00:06:23,460
bạn có thể muốn loại bỏ tất cả các tính năng không liên quan từ mã của bạn.

82
00:06:23,460 --> 00:06:29,226
Và sau đó nén nó để số tiền tối thiểu của mã sẽ được phục vụ lên.

83
00:06:29,226 --> 00:06:35,270
Đồng thời, sau khi hoàn thành

84
00:06:35,270 --> 00:06:37,200
quá trình nối JShint và uglification,

85
00:06:37,200 --> 00:06:41,990
bạn vẫn có thể muốn đảm bảo rằng mã kết quả của bạn sẽ vẫn hoạt động chính xác.

86
00:06:41,990 --> 00:06:46,490
Vì vậy, bạn có thể muốn kiểm tra lại mã của bạn cho các lỗi tiềm ẩn.

87
00:06:47,550 --> 00:06:52,127
CSS và JavaScript là hai khía cạnh chính của sự phát triển web của bạn mà

88
00:06:52,127 --> 00:06:55,640
rõ ràng bạn cần phải chú ý rất nhiều.

89
00:06:55,640 --> 00:06:59,640
Nhưng có nhiều tác vụ nhỏ hơn khác mà bạn cần thực hiện

90
00:06:59,640 --> 00:07:02,870
trước khi trang web của bạn sẵn sàng triển khai.

91
00:07:02,870 --> 00:07:08,601
Bạn có thể bao gồm rất nhiều hình ảnh vào các trang web của mình.

92
00:07:08,601 --> 00:07:14,574
Một khi trang web của bạn đã sẵn sàng, bạn có thể muốn nén

93
00:07:14,574 --> 00:07:17,881
các hình ảnh đó để bạn tối ưu hóa kích thước tệp, để

94
00:07:17,881 --> 00:07:23,440
hình ảnh của chúng sẽ là các tập tin có kích thước tối thiểu được triển khai.

95
00:07:24,510 --> 00:07:30,310
Tương tự như vậy, trong khi bạn đang phát triển, bạn có thể đang thực hiện sửa đổi,

96
00:07:30,310 --> 00:07:35,580
ví dụ, các tập tin Sass của bạn hoặc mã JavaScript của bạn.

97
00:07:35,580 --> 00:07:38,268
Khi các sửa đổi như vậy được thực hiện,

98
00:07:38,268 --> 00:07:42,748
bạn muốn có thể tự động thực hiện các nhiệm vụ đó,

99
00:07:42,748 --> 00:07:47,990
như nối, thu nhỏ, và uglification nhiệm vụ.

100
00:07:47,990 --> 00:07:52,110
Vì vậy, chúng tôi có thể sử dụng các nhiệm vụ xem,

101
00:07:52,110 --> 00:07:56,480
mà công việc chính là giữ một chiếc đồng hồ trên tất cả các tập tin này.

102
00:07:56,480 --> 00:07:59,340
Và nếu bất kỳ thay đổi nào được thực hiện đối với các tệp này,

103
00:07:59,340 --> 00:08:03,070
các tác vụ sẽ được tự động thực hiện.

104
00:08:03,070 --> 00:08:09,260
Điều này sẽ giải phóng rất nhiều thời gian của chúng tôi khỏi việc thực hiện các nhiệm vụ lặp đi lặp lại theo cách thủ công.

105
00:08:10,610 --> 00:08:15,320
Chúng ta sẽ xem xét một số điều này chi tiết hơn trong các bài tập tiếp theo.

106
00:08:16,660 --> 00:08:22,060
Một khía cạnh khác, trong khi bạn đang thực hiện phát triển của bạn,

107
00:08:22,060 --> 00:08:25,940
là để có thể phục vụ mã của bạn và

108
00:08:25,940 --> 00:08:30,570
xem mã trong trình duyệt của bạn.

109
00:08:30,570 --> 00:08:37,960
Vì vậy, chúng tôi đã thấy việc sử dụng các máy chủ trực tiếp trong phát triển trước đó của chúng tôi,

110
00:08:37,960 --> 00:08:42,330
nơi chúng tôi đã có các máy chủ lên và chạy và phục vụ lên các mã. Để

111
00:08:42,330 --> 00:08:46,530
chúng ta có thể thấy những thay đổi mà chúng ta thực hiện ngay lập tức

112
00:08:48,230 --> 00:08:51,020
được render trong trình duyệt.

113
00:08:51,020 --> 00:08:55,549
Vì vậy, cho điều này, chúng ta cần máy chủ và cơ chế tải quá tải, và

114
00:08:55,549 --> 00:09:01,340
máy chủ sống mà chúng ta thấy trước đó là một ví dụ như thế nào chúng ta có thể đạt được điều này.

115
00:09:02,740 --> 00:09:07,850
Cuối cùng, nếu bạn đang viết mã, bạn rõ ràng cần phải thực hiện kiểm tra

116
00:09:07,850 --> 00:09:14,210
mã của bạn, trong trường hợp của Bootstrap, là rất ít xem xét.

117
00:09:14,210 --> 00:09:18,930
Nhưng khi bạn tiếp tục sử dụng các framework JavaScript khác nhau,

118
00:09:18,930 --> 00:09:21,915
thử nghiệm trở thành một nhiệm vụ quan trọng không kém.

119
00:09:23,190 --> 00:09:28,680
Cuối cùng, bạn muốn có thể hoàn thành tất cả các nhiệm vụ này và

120
00:09:28,680 --> 00:09:34,250
sau đó xây dựng mã triển khai cuối cùng của bạn sau đó có thể được tải lên

121
00:09:34,250 --> 00:09:40,790
máy chủ web của bạn để làm cho trang web của bạn có sẵn cho công chúng chung.

122
00:09:42,450 --> 00:09:48,115
Các bước liên quan đến việc xây dựng trang web của bạn để triển khai, những gì chúng tôi

123
00:09:48,115 --> 00:09:53,950
gọi là xây dựng các tập tin phân phối, cũng là một nhiệm vụ không kém phần quan trọng.

124
00:09:53,950 --> 00:09:59,754
Chúng ta sẽ xem xét một số trong số này thông qua các ví dụ trong bài tập tiếp theo và

125
00:09:59,754 --> 00:10:04,470
cũng là bài học tiếp theo mà chúng ta sẽ xem xét các vận động viên nhiệm vụ.

126
00:10:04,470 --> 00:10:10,569
[ NHẠC]