[MUSIC]
Cho đến nay, chúng tôi đã tập trung vào việc thiết kế và
triển khai trang web của chúng tôi, có thể là HTML, CSS, hoặc mã JavaScript.
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à
triển khai nó vào một máy chủ web, để nó trở nên công khai.
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
trang web của bạn đã sẵn sàng để triển khai trên một máy chủ web.
Đâ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.
Như tôi đã đề cập, phát triển web và triển
khai liên quan đến rất nhiều nhiệm vụ lặp đi lặp lại.
Rõ ràng, việc viết mã HTML/CSS và JavaScript là một phần của nó.
Nhưng phần khác là thực tế là nếu bạn viết
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
ess, thì bạn cần chuyển đổi mã đó thành mã CSS tương ứng.
Sau đó, bạn cần phải thực hiện xử lý bổ sung trên các
tập tin CSS của bạn như thu nhỏ, nén và nối.
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.
Tương tự như vậy, với mã JavaScript của bạn, bạn cần phải làm
JShinting, kiểm tra các lỗi tiềm ẩn.
Sau đó nối các tập tin kịch bản khác nhau và
sau đó thậm chí uglification và mangling của mã.
Chúng ta sẽ nói một chút về điều đó trong vài slide tiếp theo.
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
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à
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.
Vì vậy, nguyên tắc DRY, không lặp lại nguyên tắc chính mình,
là rất cần thiết trong trường hợp này.
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,
và thay vào đó, cố gắng tự động hóa chúng càng nhiều càng tốt để
chúng có thể được thực hiện bất cứ khi nào cần thiết.
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.
Hãy lấy ví dụ về CSS như một trường hợp.
Khi viết mã CSS, chúng ta thường viết mã
bằng cách sử dụng một trong những ngôn ngữ tiền xử lý thích Less hay Sass.
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ử
dụng một trong những preprocessor như chúng ta đã thấy trong bài học trước đó.
Ở đó, 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
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.
Vì vậy, đây là nơi mà nhiệm vụ làm tiền tố tự động được sử dụng,
theo đó điều này có thể được tự động thực hiện cho chúng tôi.
Tương tự như vậy, một khi mã CSS của bạn được viết, rõ ràng,
cách chúng tôi viết mã CSS là để con người có thể đọc được.
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
giữa mã hoặc liệu nó có được định dạng đúng hay không.
Vì vậy, thu nhỏ là quá trình loại bỏ tất cả các ký tự không cần
thiết, khoảng trắng, dòng mới, nhận xét, từ mã CSS của bạn.
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ố
lượng ký tự tối thiểu, do đó có thể được phục vụ rất, rất nhanh chóng.
Nhưng đồng thời,
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.
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,
trong khi bạn đang thiết kế và xây dựng trang web của bạn.
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,
do đó chỉ có một tập tin CSS duy nhất cần được tải xuống
bởi trình duyệt khi nó đang hiển thị trang web của bạn.
Vì vậy, nối là
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.
Tương tự như vậy, khi bạn viết mã JavaScript, cho dù đó là JavaScript thuần túy hay
jQuery hay một trong những khuôn khổ mà chúng tôi sẽ sử dụng trong
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.
Vì vậy, một khi bạn đã viết mã JavaScript, bạn sẽ muốn có thể kiểm tra
mã JavaScript cho các lỗi và các vấn đề tiềm ẩn.
Những thứ như thiếu dấu chấm phẩy,
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.
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
trang web của chúng tôi trên máy chủ web.
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.
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
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.
Và nối này có thể được thực hiện tự động.
Tương tự như vậy, uglification của mã JavaScript, viết tắt của
minification, có nghĩa là loại bỏ tất cả các không gian trắng và
bình luận không cần thiết và vân vân.
Và sửa đổi mã, có nghĩa là giảm tên của các
biến địa phương thành các chữ cái duy nhất bất cứ nơi nào khả thi.
Bây giờ, từ góc nhìn của một máy tính,
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.
Đố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
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.
Vì vậy, khi bạn thực sự triển khai,
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.
Và sau đó nén nó để số tiền tối thiểu của mã sẽ được phục vụ lên.
Đồng thời, sau khi hoàn thành
quá trình nối JShint và uglification,
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.
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.
CSS và JavaScript là hai khía cạnh chính của sự phát triển web của bạn mà
rõ ràng bạn cần phải chú ý rất nhiều.
Nhưng có nhiều tác vụ nhỏ hơn khác mà bạn cần thực hiện
trước khi trang web của bạn sẵn sàng triển khai.
Bạn có thể bao gồm rất nhiều hình ảnh vào các trang web của mình.
Một khi trang web của bạn đã sẵn sàng, bạn có thể muốn nén
các hình ảnh đó để bạn tối ưu hóa kích thước tệp, để
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.
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,
ví dụ, các tập tin Sass của bạn hoặc mã JavaScript của bạn.
Khi các sửa đổi như vậy được thực hiện,
bạn muốn có thể tự động thực hiện các nhiệm vụ đó,
như nối, thu nhỏ, và uglification nhiệm vụ.
Vì vậy, chúng tôi có thể sử dụng các nhiệm vụ xem,
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.
Và nếu bất kỳ thay đổi nào được thực hiện đối với các tệp này,
các tác vụ sẽ được tự động thực hiện.
Đ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.
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.
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,
là để có thể phục vụ mã của bạn và
xem mã trong trình duyệt của bạn.
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,
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ã. Để
chúng ta có thể thấy những thay đổi mà chúng ta thực hiện ngay lập tức
được render trong trình duyệt.
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à
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.
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
mã của bạn, trong trường hợp của Bootstrap, là rất ít xem xét.
Nhưng khi bạn tiếp tục sử dụng các framework JavaScript khác nhau,
thử nghiệm trở thành một nhiệm vụ quan trọng không kém.
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à
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
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.
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
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.
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à
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ụ.
[ NHẠC]