[MUSIC]
Bây giờ chúng ta sẽ tiếp tục hành trình của chúng tôi với các kịch bản NPM trong bài tập tiếp theo này.
Ở đây, chúng ta sẽ tìm hiểu làm thế nào để có thể xây dựng
một thư mục phân phối chứa tất cả các tập tin cho
dự án của chúng tôi mà chúng ta có thể chỉ đơn giản triển khai đến một máy chủ web lưu trữ trang web của chúng tôi.
Vì vậy, với các tập tin HTML, CSS và JavaScript mà
chúng tôi đã chuẩn bị trong thư mục dự án của chúng tôi, chúng tôi sẽ, từ những,
xử lý chúng bằng cách sử dụng các nhiệm vụ khác nhau mà chúng tôi đã nói về.
Đó là thực hiện một sửa đổi CSS,
nối và uglification JavaScript, thu nhỏ
và HTML thu nhỏ và
sau đó tạo ra một thư mục phân phối với tất cả các tập tin.
Nhưng về cơ bản tạo thành tập hợp các tập tin có thể được
triển khai đến máy chủ web của chúng tôi lưu trữ trang web của chúng tôi.
Để giúp bạn hiểu những gì chúng tôi sẽ làm trong bài tập cụ thể này,
như chúng tôi lưu ý từ trang index.html của chúng tôi, chúng tôi có một tập hợp các tập
tin CSS mà bạn đưa vào đây bằng cách sử dụng thẻ liên kết này ở đây.
Tương tự như vậy, bạn có một tập hợp các kịch bản mà bạn đã bao gồm
ở cuối trang này bằng cách sử dụng thẻ kịch bản.
Chúng tôi đã bao gồm một bộ mã JavaScript.
Bây giờ, những gì chúng ta sẽ làm trong bài tập này là để kết hợp tất cả các tập
tin này vào một tập tin JavaScript duy nhất sẽ được gửi
từ máy chủ web của chúng tôi đến một trình duyệt đang cố gắng để xem trang web của chúng tôi.
Bằng cách này, chúng tôi giảm thiểu số lượng tải xuống mà trình duyệt cần thực hiện
để hiển thị trang web của chúng tôi.
Tương tự như vậy, chúng tôi sẽ kết hợp tất cả các mã CSS vào một tập tin CSS duy nhất,
để nó có thể được phân phối.
Vì vậy, các tập tin CSS kết hợp sẽ chứa tất cả các mã cho
Bootstrap cộng với Bootstrap xã hội, và cũng là Font Awesome và
cũng là mã CSS mà chúng tôi đã viết.
Tương tự như vậy, sẽ có một tập tin JavaScript duy nhất mà
sẽ chứa jQuery tether, Bootstrap và mã JavaScript mà chúng tôi,
chính chúng tôi đã viết, tất cả kết hợp với nhau trong một tập tin duy nhất.
Bây giờ, đây là cách bạn có thể triển khai các trang web của bạn.
Và thay vì có nhiều tập tin như vậy ở đó, một cách mà
triển khai được thực hiện là kết hợp chúng thành một tập tin duy nhất để một tải xuống duy nhất
bạn nhận được tất cả các mã JavaScript cần thiết để hiển thị trang web của bạn.
Một tải về duy nhất bạn nhận được tất cả các mã CSS cần thiết để
hiển thị trang web của bạn.
Và sau đó, tất nhiên, bản thân tệp HTML sẽ được tải xuống.
Để hoàn thành các nhiệm vụ này, chúng ta cần phải sử dụng
một bộ mô-đun NPM nhất định để thực hiện việc này.
Bây giờ, những gì chúng tôi sẽ kết thúc làm là xây dựng một thư mục
trong tập tin dự án của chúng tôi, và sau đó chúng tôi gọi thư mục đó là dist, D-I-S-T.
Tôi chỉ ngẫu nhiên đặt tên đó là một thư mục dist.
Trong trường hợp của tôi, những gì tôi có nghĩa là của thư mục dist là một thư mục phân phối.
Vào cuối tập hợp các bước chúng tôi sẽ làm, thư mục này sẽ chứa tất cả
các tệp có thể được sao chép đơn giản vào máy chủ web lưu trữ trang web của chúng tôi.
Để bắt đầu, những gì chúng tôi sẽ làm là thiết lập một tập hợp các
kịch bản ở đây sẽ giúp chúng tôi tự động hóa quá trình này.
Vì vậy, điều đầu tiên, chúng tôi có thể
chuẩn bị thư mục phân phối một lần sau đó có thể chúng tôi có thể thực hiện một số chỉnh sửa các
tập tin nguồn của chúng tôi sau đó chúng tôi có thể cần phải biên dịch lại thư mục phân phối của chúng tôi.
Bước đầu tiên, chúng tôi sẽ thiết lập kịch bản để làm sạch thư mục phân phối
về cơ bản có ý nghĩa, xóa thư mục phân phối.
Vì vậy, để làm điều đó, tôi sẽ lấy sự giúp đỡ của một mô-đun NPM gọi là rimfraf.
Vì vậy, tôi sẽ cài đặt npm —save-dev rimfraf.
Mô-đun này giúp chúng tôi làm sạch một thư mục hoàn toàn.
Vì vậy, một khi tôi đã cài đặt này, sau đó tôi sẽ thiết lập một kịch bản
trong tập tin package.json của tôi để làm sạch tất cả các tập tin.
Đi đến tập tin package.json, tôi sẽ thêm vào, vì vậy
hãy nhớ luôn luôn rằng hôn mê là rất, rất quan trọng trong những kịch bản.
Đôi khi bạn sẽ gặp vấn đề chỉ vì bạn quên dấu phẩy.
Vì vậy, hãy chắc chắn rằng bạn đặt những dấu phẩy khi cần thiết.
Mô tả tiếp theo mà tôi sẽ thêm là, sạch sẽ,
rõ ràng như tên của nó, điều này sẽ làm sạch ra thư mục của tôi.
Vì vậy, tôi sẽ nói rimraf quận.
Điều này có nghĩa là điều này, khi được thực hiện,
sẽ làm sạch thư mục phân phối.
Vì vậy, tôi sẽ thêm vào đó, và
sau đó tôi sẽ đặt dấu phẩy đó ở đó bởi vì tôi sẽ thêm nhiều kịch bản bên dưới này.
Vì vậy, hãy để tôi lưu những thay đổi, bước tiếp theo mà tôi sẽ làm là
để cài đặt một mô-đun npm gọi là tập tin sao chép được sử dụng để sao chép
một số tập tin phông chữ từ thư mục module nút của tôi vào thư mục phân phối của tôi.
Vì vậy, khi nó được triển khai, các tập tin phông chữ cũng được triển khai.
Đi đến thiết bị đầu cuối, gói tiếp theo mà tôi sẽ cài đặt là
npm -g, nhớ lại rằng điều này có nghĩa là nó nên được cài đặt trên toàn cầu.
Vì tôi đang làm điều này trên máy Mac,
tôi nên nói sudo npm -g, nếu bạn đang làm điều đó trên Windows, bạn không cần sudo.
sudo npm -g cài đặt tập tin sao chép.
Và sau đó một khi đã được cài đặt, mô-đun NPM này sẽ giúp tôi sao chép các
tập tin từ một thư mục sang một thư mục khác.
Bây giờ, để tôi giới thiệu một kịch bản NPM khác ở đây.
Đi đến tập tin package.json của
tôi, tôi sẽ tạo ra một scrip mới ở đây tên copyfonts.
Kịch bản này sẽ cho phép tôi sao chép tất cả các tập tin phông chữ từ thư mục
Font Awesome của tôi vào thư mục phân phối của tôi.
Vì vậy, khi trang web của tôi được render,
tất cả các tập tin phông chữ cũng có thể được gửi đi, như vậy mà các
trang web của tôi được render một cách chính xác với phông chữ tuyệt vời tại chỗ.
Vì vậy, để làm điều đó, tôi sẽ nói, sao chép các tập tin -f,
-f có nghĩa là nó chỉ đơn giản là sao chép các tập tin mà không có đầy đủ của hệ thống phân cấp và
chỉ đơn giản là sao chép các tập tin từ một vị trí khác.
Vì vậy, tôi sẽ nói sao chép tập tin -f
node_modules/font_awesome/fonts/sao
Và dist/font chữ,
Và sau đó lưu những thay đổi.
Bây giờ hãy để tôi minh họa cách hai kịch bản npm này làm việc cùng nhau.
Đi đến cửa sổ lệnh của tôi, tôi sẽ gõ
npm chạy copyfonts.
Khi điều này chạy, nó sẽ tạo ra một thư mục
tên dist trong hệ thống phân cấp thư mục dự án của tôi.
Và sau đó bên trong dist,
sẽ có một thư mục con có tên là phông chữ, sẽ chứa các tệp phông chữ.
Vì vậy, chạy này,
bạn sẽ ngay lập tức nhận thấy rằng thư mục phân phối được tạo ra ở đây.
Và bên trong thư mục phân phối,
bạn có thể thấy rằng có một thư mục con có tên là phông chữ.
Và bên trong đó, tất cả các tập tin fontawesome đã được sao chép.
Đây là cách kịch bản copyfonts hoạt động.
Bây giờ, tôi sẽ chỉ cho các bạn cách kịch bản sạch hoạt động.
Vì vậy, nếu tôi gõ vào npm chạy sạch, điều này sẽ xóa thư mục phân phối đó.
Vì vậy, khi tôi chạy điều đó, sau đó bạn sẽ nhận thấy rằng
thư mục phân phối bị xóa khỏi hệ thống phân cấp thư mục dự án của tôi.
Vì vậy, đây là cách sạch sẽ hoạt động.
Bây giờ chúng ta đã thiết lập hai tập lệnh này,
bây giờ chúng ta cần có khả năng xây dựng các tập tin phân phối còn lại.
Trong bước tiếp theo, chúng ta sẽ cài đặt một mô-đun nút gọi là imagemin-cli,
đó là giao diện dòng lệnh cho mô-đun imagemin.
Mô-đun imaginemin sẽ lấy một phái các tập tin hình ảnh và sau đó nén chúng xuống.
Vì vậy, nó xếp chồng lên nhau kích thước của những tập tin được giảm thiểu càng nhiều càng tốt,
nhưng vẫn được hiển thị đúng khi trang web của chúng tôi được hiển thị.
Vì vậy, theo cách này, chúng tôi sẽ giảm lượng dữ liệu
cần được tải xuống bởi trình duyệt khi nó cần để hiển thị trang web của chúng tôi.
Vì vậy, nếu bạn đang bao gồm hình ảnh vào trang web của bạn, sau đó imagemin nhiệm vụ là một
cái gì đó mà bạn nên học để tor giảm kích thước của các tập tin hình ảnh của bạn.
Vì vậy, để làm điều đó, tôi sẽ cài đặt mô-đun nút imagemin này như là một mô-đun toàn cầu.
Vì vậy, tôi gõ vào sudo, vì tôi đang sử dụng một máy Mac,
npm -g cài đặt imagemin-cli,
và sau đó cài đặt mô-đun nút này.
Đôi khi trên máy Mac, một số plugin imagemin không được cài đặt chính xác.
Vì vậy, đó là lý do tại sao tôi đưa ra những lá cờ bổ sung để lệnh,
họ đang nói —unsafe-perm=true và —allow-root.
Sau khi cài đặt hoàn tất,
hãy để tôi thiết lập một kịch bản để thực hiện phóng đại hình ảnh của tôi.
Đi đến package.json một lần nữa, tôi sẽ thiết lập kịch bản tiếp theo ở đây.
Vì vậy, tôi có thể nói imagemin là tên kịch bản mà tôi sẽ làm,
và tôi sẽ nói imagemin.
Và sau đó kể từ khi tất cả các hình ảnh của tôi nằm trong thư mục img, tôi sẽ nói img/*,
và sau đó nhiều tập tin sẽ được sao chép vào hình ảnh dist.
Vì vậy, các tập tin hình ảnh ban đầu từ thư mục hình ảnh mà tôi có sẽ được sao chép
vào thư mục phân phối và vào thư mục con hình ảnh ở đó.
Điều này hoàn thành imagemin của tôi.
Hãy để tôi tiếp tục với thiết lập còn lại, và
sau đó chúng ta sẽ thấy làm thế nào chúng ta sẽ sử dụng các kịch bản mà chúng tôi đã thiết lập ở đó.
Bây giờ tôi có thư mục thử nghiệm trong đó, mà tôi có thể tạo ra,
tôi không muốn kiểm tra trong thư mục dist vào kho lưu trữ Git của tôi.
Vì vậy, đó là lý do tại sao vào tập tin .gitignore của tôi, tôi sẽ thêm vào thư mục dist cũng.
Vì vậy, thư mục dist sẽ bị bỏ qua khi tôi kiểm tra của tôi vào kho Git.
Vì vậy, chúng ta hãy lưu các thay đổi, quay trở lại package.json.
Bây giờ, những gì tôi sẽ làm tiếp theo là để cài đặt ba
mô-đun nút khác nhau, cho phép tôi thực hiện các sửa
đổi cho tập tin index.html của tôi và các tập tin HTML còn lại ở đó.
Tại dấu nhắc lệnh, gõ npm install —save dev.
Tôi sẽ cài đặt một mô-đun gọi là usemin-cli.
Usemin-cli này là một trong đó cho phép tôi thực hiện chuyển đổi từ
tập tin HTML của tôi.
Và sau đó nối và kết hợp tất cả các
tập tin CSS vào một tập tin CSS duy nhất, và sau đó đưa nó vào thư mục phân phối.
Tương tự, tất cả các tập tin JS sẽ được nối và đưa vào một thư mục duy nhất.
Vì vậy, usemin-cli này rất hữu ích.
Nhưng usemin-cli này có sự giúp đỡ
của ba mô-đun nút khác được gọi là cssmin,
sau đó uglifyjs, và htmlmin.
Vì vậy, tôi cần phải cài đặt ba module nút này ngoài usemin-cli.
Và tôi sẽ cài đặt này tại địa phương vào dự án của tôi, vì vậy
đó là lý do tại sao npm cài đặt —save-def.
Vì vậy, bằng cách này, họ sẽ được ghi nhớ trong tập tin package.json của tôi.
Vì vậy, chúng ta hãy tiếp tục và hoàn thành việc cài đặt.
Bây giờ tôi đã cài đặt các usemin và
các module nút liên quan, tôi cần phải thực hiện một số chuyển đổi
để tập tin index.html của tôi và các tập tin HTML còn lại.
Như vậy mà usemin node_module nhận ra rằng nhóm này là
một loạt các tập tin CSS cần phải được nén, tính toán và xác minh.
Tương tự, đây là nhóm các tập tin JavaScript cần được uglyfied,
kết hợp, và nối với nhau.
Vì vậy, để giúp các gói usemin làm việc,
tôi cần phải thêm một chút mã vào tập tin index.html của tôi.
Vì vậy, ngay trước khi liên kết đầu tiên ở đó,
tôi sẽ thêm vào một dấu hiệu ở đây, trong
đó nói! — xây dựng:css.
Bây giờ, cái này! -, như bạn sẽ nhận ra,
là một nhận xét từ quan điểm html.
Vì vậy, bên trong nhận xét đó, tôi sẽ bao gồm rằng dòng đặc biệt này
sẽ được sử dụng bởi trình đơn sử dụng để nhận ra khối
mã xác định tất cả các tập tin CSS cần phải được chuyển giao.
Vì vậy, tôi nói build.css, và sau đó tôi sẽ chỉ
định tên tập tin là css/main.css.
Đây là cú pháp để xác định.
Điều này có nghĩa là các khối của các tập tin CSS tất cả sẽ được kết hợp với nhau,
và sau đó nối, thu nhỏ, và sau đó đưa vào tập tin này được gọi là main.css.
Và sau đó khối này sẽ được xác định ở phía bên kia bằng cách nói,
gạch nối —, được rồi, xin lỗi.
Tôi quên bao gồm dấu gạch ngang đôi ở cuối đó.
Đó là lý do tại sao điều này không chuyển màu.
Vì vậy, đôi khi bạn đang hạnh phúc khi
biên tập viên của bạn chỉ ra những sai lầm tiềm ẩn mà bạn có thể đang cam kết.
Vì vậy, ngay đó tôi sẽ nói endbuild và
sau đó — khung bên phải ở đó.
Bây giờ, bất cứ điều gì là giữa xây dựng và
endbuild này, nhóm này sẽ được coi là một đơn vị để
được kết hợp bởi mô-đun npm usemin của chúng tôi ở đó.
Xem cú pháp module usemin sử dụng ở đó.
Tôi cần phải làm chuyển đổi tương tự để contactus.html và aboutus.html cũng.
Vì vậy, tôi sẽ sao chép cái này
ở đây cái lười biếng của tôi.
Tôi sẽ chỉ đơn giản là sao chép và
dán vào contactus.html và
sau đó cũng aboutus.html ở đó.
Tương tự như vậy, quay trở lại index.html,
tôi sẽ sao chép inbuild này và sau đó cũng sao chép nó vào
contactus.html và aboutus.html dữ liệu.
Được rồi, chúng ta hãy lưu các thay đổi cho tất cả các tập tin.
Sau đó, quay trở lại index.html.
Tôi sẽ lặp lại cùng một điều ở phía dưới cho các
kịch bản JavaScript của tôi mà tôi đã bao gồm ở đó.
Vì vậy, đi đến dưới cùng ở đây,
những gì tôi cần phải làm ở đây,
là để chỉ định <! - xây dựng js,
và tôi sẽ nói js/main.js.
Dấu gạch nối đôi, dấu gạch chéo.
Vì vậy, đó là sự khởi đầu của khối và sau đó kết thúc được xác định bởi,
Build, okay?
Vì vậy, với những thay đổi này, bây giờ, tập tin index.html của tôi đã sẵn sàng,
và tôi phải thực hiện chuyển đổi tương tự để contactus.html ở phía dưới.
Và aboutus.html cũng ở phía dưới.
Tương tự như vậy, enbuild này sao chép trong.
Vào contactus.html và aboutus.html và sau đó lưu tất cả các tập tin.
Và điều đó chuẩn bị các tập tin HTML của chúng tôi để
được chuyển đổi để chuẩn bị thư mục phân phối.
Những tập tin này sẽ vẫn như vậy, nhưng sau đó các tập tin được chuyển đổi sẽ được đưa vào
thư mục phân phối được tạo ra từ các tập tin này.
Bây giờ, một khi chúng ta hoàn thành điều đó, chúng ta hãy thiết lập một số kịch bản.
Đi đến package.json, tôi sẽ thiết lập kịch bản tiếp theo của tôi được gọi là usemin.
Và sau đó điều này nói usemin,
contactus.html -d dist, đây là cú pháp cho
chỉ định -d dist ý nghĩa rằng điểm đến cho
phân phối này phân phối thư mục.
Và sau đó tôi sẽ nói htmlmin, điều này cũng sẽ giảm thiểu các tập tin HTML.
Vì vậy, nó sẽ loại bỏ tất cả các không gian không liên quan và ý kiến từ các tập tin HTML.
Nhưng họ nén nó xuống để
nó chứa số lượng ký tự tối thiểu ở đó.
Chúng ta sẽ xem xét kết quả sau khi chúng ta hoàn thành và thực hiện chuyển đổi ở đó.
Vì vậy, và sau đó, không chỉ có vậy,
và sau đó htmlmin, và sau đó nói
-o dist/contactus.html và
&&, điều này có nghĩa là có
nhiều hơn để đến sau này.
Sau đó, tôi sẽ nói usemin
sau đó aboutus.html
-d quận —htmlmin
-o dist/aboutus.html.
Vì vậy, đó là cái thứ hai để chuyển đổi tập tin aboutus.html.
Và sau đó &&, đây là một kịch bản dài,
usemin index.html,
chúng ta cần phải chuyển đổi tất cả các tập tin.
Vì vậy, đó là lý do tại sao tôi cần phải xác định từng cái một cách rõ ràng ở đó.
usemin không mất thẻ hoang dã, vì vậy
đó là lý do tại sao tôi phải xác định giữ như [không nghe được].
Và như vậy usemin index.html
-d quận —htmlmin
-o dist/index.html.
Và sau đó tôi đặt một dấu phẩy bởi vì tôi sẽ giới thiệu các kịch bản tiếp theo,
đó là, Gọi là xây dựng.
Vì vậy, kịch bản xây dựng này sẽ tạo thư mục phân phối của tôi.
Vì vậy, để tạo thư mục phân phối
của tôi, điều đầu tiên mà tôi sẽ làm là npm chạy sạch.
Và sau đó npm chạy copyfonts.
Bạn đã nhìn thấy hai trong hành động trước
đó, sau đó tôi sẽ nói npm chạy imagemin để tạo ra các hình ảnh giảm thiểu,
và sau đó tôi sẽ nói npm chạy usemin.
Và kịch bản đặc biệt này sẽ xây dựng thư mục phân phối của tôi,
nội dung của nó sau đó có thể được sao chép vào máy chủ web của tôi để giải quyết quảng cáo của tôi.
Lưu các thay đổi.
Bây giờ chúng ta hãy xem cách chúng ta xây dựng trang web.
Tại thời điểm này, để xây dựng trang web của chúng tôi và
dấu nhắc lệnh chỉ đơn giản là gõ npm chạy build và sau đó chỉ cần thực hiện.
Kịch bản đó, lần lượt sẽ thực hiện một tập hợp
các kịch bản, do đó sẽ hoàn thành toàn bộ tập hợp
các tác vụ phải được thực hiện để chuẩn bị thư mục phân phối của tôi.
Vì vậy, chúng ta hãy đi trước và chạy điều này và
sau đó điều này sẽ chạy qua tất cả các kịch bản khác nhau ở đó.
Phải mất vài phút để hoàn thành, và khi nó được hoàn thành,
thì thư mục phân phối của bạn bây giờ sẽ sẵn sàng triển khai lên máy chủ web của bạn.
Đi đến trình soạn thảo của chúng tôi,
bây giờ bạn thấy rằng thư mục phân phối đã sẵn sàng.
Bên trong thư mục phân phối, bạn sẽ thấy ba tập tin chỉ mục,
và trong thư mục CSS, bạn sẽ thấy tập tin duy nhất được gọi là m ain.css,
chứa tất cả các Bootstraps CSS, Bootstraps CSS,
và mã CSS mà bạn đã tạo ra.
Và thư mục JS sẽ chứa main.js,
chứa Bootstrap, jQuery, và
tất cả các bó toàn bộ mã JavaScript kết hợp với nhau thành một tập tin duy nhất.
Hình ảnh sẽ chứa các hình ảnh được tối ưu hóa, và các phông chữ, rõ ràng,
bạn đã thấy trước đó, chứa các tập tin phông chữ.
Bây giờ, chúng ta hãy xem xét nhanh index.html đã được tạo ra ở đây.
Vì vậy, khi bạn nhìn vào index.html đã được tạo ra ở đây,
bạn sẽ nhận thấy rằng toàn bộ điều là nghĩa đen không thể đọc được,
bởi vì khi bạn đã làm HTML phút nó đã tước bỏ tất cả các
ý kiến không liên quan, nó đã tước bỏ tất cả các không gian, và
sau đó tạo ra toàn bộ này chạy bộ ký tự.
Với máy tính, nó không tạo ra bất kỳ sự khác biệt nào bởi vì nó sẽ hiển thị
trang web này chỉ là tốt.
Đối với bạn và tôi, nó tạo nên sự khác biệt, bởi vì chúng ta không thể đọc nó dễ dàng.
Vì vậy, đây là những gì thu nhỏ gây ra cho tập tin HTML của bạn.
Chúng ta hãy nhìn vào main.css.
Khi bạn nhìn vào main.css, bạn thấy toàn bộ điều này được crunched lên
thành một đơn vị duy nhất, khi bạn đi đến phía dưới.
Nếu bạn đủ dũng cảm, đi xuống phía dưới và sau đó bạn sẽ thấy,
Bạn sẽ thấy giờ đặc biệt bằng văn bản
CSS lớp ngay xuống ở dưới đây.
Ngay tại đó, bạn nhận ra nút băng chuyền, và những thứ
khác, cái nồi tối, và những thứ khác ở đó, vì vậy tất cả đều bị cuốn vào.
Vì vậy, đó là những gì thu nhỏ, và chi phí.
Main.js, cùng một thứ.
Mã không thể đọc được ở đó.
Máy tính của họ, không có gì khác biệt.
Vì vậy, với điều này, thư mục phân phối của chúng tôi bây giờ đã hoàn tất.
Hãy kiểm tra thư mục phân phối của chúng tôi.
May mắn thay, chúng tôi có máy chủ ánh sáng của chúng tôi đã chạy.
Vì vậy, những gì tôi sẽ làm là để đi đến trình duyệt, và
sau đó kiểm tra các tập tin CLM sẵn sàng chỉ mục trong thư mục phân phối này để
xem liệu nó đang được hiển thị một cách chính xác hay không.
Đi đến trình duyệt, trong thanh địa chỉ của tôi, tôi sẽ gõ,
dist index.html, và
nhận thấy rằng tập tin cụ thể này là tập tin phân phối
đã được tạo ra, và nó chứa chính xác cùng một điều và hiển thị chính
xác theo cách tương tự như trang web ban đầu của chúng tôi mà chúng tôi tạo ra.
Về, tương tự, nhận thấy rằng aboutus.html này là từ
thư mục phân phối và điều này được hiển thị chính xác như trước,
và cũng là tệp contactus.html.
Mọi thứ đều hoạt động hoàn hảo.
Vì vậy, bây giờ tất cả những gì còn lại cho bạn để làm để triển khai trang web của bạn,
hoặc trang web của bạn, chỉ đơn giản là sao chép nội dung từ thư mục dist,
và sau đó tải nó lên máy chủ web của bạn, và
sau đó máy chủ web của bạn đang hoạt động và phục vụ trang web của bạn.
Với điều này, chúng tôi hoàn thành bài tập này.
Trong bài tập này, chúng tôi đã thấy cách chúng tôi có thể sử dụng các tập
lệnh NBM để xây dựng và triển khai trang web của chúng tôi.
Đây có thể là thời điểm tốt
để bạn thực hiện một Nhận Nhận xét với tin nhắn NPM Scripts, Phần 2.
[ NHẠC]