Bây giờ chúng ta có một sự hiểu biết về
các bước khác nhau liên quan đến việc xây dựng và triển khai trang web của chúng tôi,
và cũng là một giới thiệu ngắn gọn về các kịch bản NPM trong bài giảng trước đó, chúng ta
hãy đi sâu vào việc phát triển
các kịch bản NPM để tự động hóa nhiều nhiệm vụ mà chúng tôi đã nói về trước đó.
Như bạn đã thấy trong bài giảng trước,
chúng tôi đã có một vài kịch bản NPM mà chúng tôi đã bao gồm trong tập tin package.json của chúng tôi,
một để khởi động máy chủ lite và thứ hai
để chuyển đổi mã SCSS thành CSS.
Trong bài tập này và tiếp theo,
chúng ta sẽ khám phá các kịch bản NPM một cách chi tiết hơn một chút.
Để bắt đầu, trước tiên chúng ta hãy thực hiện một số dịch vụ dọn dẹp trên tệp index.html.
Đi đến tập tin index.html,
chúng ta thấy rằng chúng ta có mã JavaScript này ở dưới cùng của tập tin index.html này.
Tôi muốn giữ mã JavaScript này trong
một tập tin riêng biệt chứa tất cả các kịch bản của chúng tôi,
và sau đó bao gồm tập tin đó vào index.html của tôi.
Để làm điều đó, chúng ta hãy tạo một thư mục khác ở đây với tên js.
Và trong thư mục js này,
tôi sẽ tạo ra một tập tin mới với tên scripts.js.
Và đi đến index.html,
tôi sẽ chỉ đơn giản là cắt mã JavaScript này từ đây và
sau đó dán vào tệp scripts.js,
và sau đó lưu các thay đổi vào tệp scripts.js.
Bây giờ chúng tôi đã di chuyển tất cả các mã JavaScript của chúng tôi vào tập tin riêng của nó,
bây giờ tôi sẽ bao gồm các tập tin JavaScript đó vào index.html của tôi ngay tại đó.
Tôi sẽ nói <script src =
“js/scripts.js” Vì vậy, theo cách này,
tất cả các mã JavaScript của tôi bây giờ được bao gồm trở lại vào tập tin index.html của tôi.
Bằng cách này, tập tin index.html của tôi chứa tất cả các mã html,
và tất cả các mã CSS và JavaScript của tôi được tắt trong các tập tin riêng biệt của họ.
Hãy để tôi sao chép dòng kịch bản này từ trang index.html,
và sau đó đi đến trang aboutus.html,
cuộn xuống tất cả các cách để dưới cùng nơi tôi đã bao gồm
các kịch bản khác và sau đó dán này.
Tương tự như vậy, hãy để tôi đi qua trang contactus.html,
và một lần nữa cuộn xuống dưới cùng của tập tin ở đó.
Để tôi dán dòng này.
Hãy lưu các thay đổi và sau đó chuyển sang bước tiếp theo.
Bước tiếp theo mà tôi muốn làm là cài đặt một vài
mô-đun NPM mà tôi sẽ sử dụng để tự động hóa một số tác vụ.
Mô-đun NMP đầu tiên mà tôi sẽ cài đặt được gọi là onchange.
Module onchange này sẽ xem các tập tin trong thư mục dự án của tôi,
và sau đó bất cứ khi nào những tập tin thay đổi,
sau đó nó sẽ tự động kích hoạt một nhiệm vụ được thực hiện.
Bằng cách này, ví dụ,
nếu tôi thiết lập một dấu ngoặc kép đồng hồ trên một số tập tin,
ví dụ như tập tin SCSS của tôi,
sau đó bất cứ khi nào tôi thực hiện thay đổi cho tập tin SCSS của tôi,
nó sẽ tự động được biên dịch lại vào tập tin CSS tương ứng.
Chúng tôi đã có kịch bản thực hiện việc biên soạn lại.
Vì vậy, tất cả những gì tôi cần làm là thiết lập một chiếc đồng hồ trên tập tin cụ thể đó.
Bây giờ đây là nơi tôi sẽ sử dụng mô-đun NPM gọi là Onchange.
Có một mô hình NPM khác được gọi là Watch,
mà bạn cũng có thể sử dụng cho cùng một mục đích.
Trong bài tập này, tôi sẽ sử dụng mô-đun Onchange,
sau đó chúng tôi đối phó với cấp và gulp trong các bài học sau,
chúng tôi sẽ sử dụng mô-đun Watch cho cùng một mục đích.
Ngoài ra, tôi cũng sẽ cài đặt một mô-đun NPM khác gọi là shell song song.
Mô-đun Parallelshell này cho phép tôi thực hiện
nhiều kịch bản NPM trong Parallelshells như tên gọi của nó.
Vì vậy, theo cách này, nhiều kịch bản NPM có thể được
thực hiện đồng thời và cho phép tôi theo dõi trên các tập tin khác nhau,
và cũng thực hiện các nhiệm vụ khác.
Vì vậy, cho phép cài đặt hai mô-đun NPM này.
Chúng tôi sẽ cài đặt chúng tại địa phương trong dự án cụ thể này.
Vì vậy, để làm điều đó tôi sẽ gõ npm cài đặt.
Tôi phải —save-dev và sau đó tôi sẽ nói onchange
và parallelshell và sau đó chờ đợi cho hai mô-đun NPM được cài đặt.
Một khi hai mô-đun được cài đặt,
sau đó tôi sẽ bao gồm một vài kịch bản NPM vào tập tin package.json của tôi.
Và tôi sẽ giải thích cho bạn lý do khi chúng tôi đưa vào những kịch bản đó.
Quay trở lại tập tin package.json của tôi,
ngay sau khi SCSS này,
tôi sẽ bao gồm một kịch bản được gọi là “watch:scss”.
Và như tên của nó,
điều này sẽ giữ một chiếc đồng hồ trên các tập tin SCSS.
Vì vậy, đây là nơi tôi sẽ gọi mô-đun NPM onchange mà tôi vừa cài đặt,
và sau đó tôi sẽ nói mã đơn 'css/*.scss”.
Vì vậy, điều đó có nghĩa là giữ xem trên tất cả các tập tin SCSS có trong thư mục CSS.
Nếu bất kỳ trong số họ thay đổi,
sau đó bạn sẽ kích hoạt kịch bản cụ thể này và kịch bản là “—npm
chạy scss” bởi vì đó
là kịch bản sẽ làm biên dịch lại mã SCSS của tôi vào mã CSS tương ứng.
Vì vậy, với điều này, tôi đã thiết lập một chiếc đồng hồ cho SCSS của tôi.
Rõ ràng là tôi có thể gõ “nmp watch:scss”.
Và sau đó nó sẽ kích hoạt kịch bản có với module onchange,
vì vậy nó sẽ giữ một chiếc đồng hồ trên đó.
Nếu bạn đang thực hiện bài tập này trên một máy Windows,
thay vì trích dẫn duy nhất trong kịch bản,
bạn nên thay thế bằng dấu gạch chéo ngược và dấu ngoặc kép.
Tương tự như vậy, dấu ngoặc đơn khác
cũng thay thế bằng dấu gạch chéo ngược và dấu ngoặc kép.
Vì vậy, đây là cách kịch bản sẽ nhìn trên một máy Windows.
Bây giờ, tôi sẽ sử dụng Parallelshell
để kích hoạt nhiều kịch bản này đồng thời hoạt động.
Vì vậy, tôi sẽ nói “parallelshell”,
và sau đó trong dấu ngoặc kép,
tôi sẽ nói 'npm run watch:scss'.
Vì vậy, Parallelshell lấy nhiều trong số này làm tham số,
mỗi tham số trong dấu ngoặc kép duy nhất ở đó.
Và thứ hai là 'npm chạy lite'.
Vì vậy, bạn có thể thấy rằng Parallelshell này cho phép tôi thực hiện hai kịch bản cùng
một lúc, một để giữ một chiếc đồng hồ trên tập tin SCSS của tôi,
một trong những khác để chạy các lite shell.
Nếu bạn đang thực hiện bài tập này trên một máy Windows,
thay vì mã duy nhất trong kịch bản,
bạn nên thay thế bằng dấu gạch chéo ngược và dấu ngoặc kép.
Tương tự như vậy, dấu ngoặc đơn khác
cũng thay thế bằng dấu gạch chéo ngược và dấu ngoặc kép.
Vì vậy, đây là cách kịch bản sẽ nhìn trên một máy Windows.
Bây giờ sau khi thực hiện những thay đổi này,
hãy để tôi lưu các thay đổi và sau đó tôi sẽ đi lên
đây và sau đó bắt đầu một kịch bản mà tôi có ở đây.
Tôi sẽ thay đổi điều đó từ “npm run lite” để “npm run watch:all”.
Và lưu các thay đổi ở đây.
Vì vậy, với điều này, các kịch bản mà tôi cần bây giờ được thiết lập.
Vì vậy, bây giờ, tôi có thể đi trước và làm
“npm bắt đầu” và mà về cơ bản sẽ bắt đầu hai kịch bản này cùng
một lúc, một giữ một chiếc đồng hồ trên các tập tin SCSS của tôi mà lần lượt sẽ
kích hoạt việc biên soạn của SCSS để CSS,
một trong đó bắt đầu máy chủ lite của tôi.
Bây giờ, tôi đã bắt đầu dưới tab bảng và sau đó chuyển đến thư mục dự án,
và sau đó thêm dấu nhắc.
Tôi sẽ gõ “npm start”.
Và điều này sẽ kích hoạt
cả máy chủ lite của tôi mà sẽ lưu lên các tập tin từ thư mục nhầm lẫn của tôi,
và cũng kích hoạt các mô-đun Onchange để giữ một chiếc đồng hồ trên các tập tin SCSS.
Để giúp minh họa cho bạn làm thế nào Onchange này giữ một chiếc đồng hồ trên các tập tin SCSS của tôi,
những gì tôi sẽ làm là đi đến tập tin styles.scss của tôi ở đây,
và sau đó tôi sẽ chỉ đơn giản là lưu các tập tin một lần nữa.
Bây giờ bất cứ khi nào tập tin này được lưu,
tôi sẽ không thực hiện bất kỳ thay đổi nào đối với nó.
Tôi sẽ chỉ nhấn lưu trên tập tin.
Vì vậy, bất cứ khi nào tập tin này được thay đổi,
bạn sẽ thấy rằng ngay lập tức
Onchange sẽ kích hoạt các nút SAS script để được thực hiện,
mà sẽ biên dịch các tập tin từ SCSS để CSS và tạo ra các tập tin CSS ở đây,
và sau đó lưu các tập tin mà cũng sẽ kích hoạt
trang web của tôi để được tải lại nó vào trình duyệt.
Vì vậy, điều này về cơ bản là những gì chúng tôi đã đạt được bằng cách sử dụng mô-đun Onchange để giữ
một chiếc đồng hồ trên các tập tin mà sau đó thay đổi
sẽ kích hoạt một số kịch bản NPM tự động.
Bây giờ, điều này giải phóng chúng ta khỏi những lo ngại về việc phải tự kích hoạt các nhiệm vụ này.
Vì vậy, ví dụ, nếu bạn có một tập hợp các tác vụ mà bạn muốn kích hoạt tự động,
sau đó một số thay đổi xảy ra.
Bạn có thể dễ dàng thiết lập nhiệm vụ xem như vậy để giữ một chiếc đồng hồ trên những thay đổi này.
Bây giờ tôi đã minh họa điều đó với một ví dụ duy nhất.
Trong ví dụ của tôi ở đây,
tôi chỉ sửa đổi các tập tin CSS cần phải được biên dịch.
Nhưng sau đó, sau đó chúng tôi làm việc với JavaScript framework.
Bạn sẽ thấy rằng bạn có thể muốn kích hoạt biên dịch khi các tập tin khác nhau đã thay đổi.
Và tất cả những điều này có thể dễ dàng quản lý bằng cách sử dụng các tác vụ đồng hồ này.
Liệu điều này, chúng tôi hoàn thành bài tập này.
Ở đây, chúng tôi đã học cách thiết lập một vài kịch bản NPM nữa,
và tự động kích hoạt một số kịch bản bằng cách sử dụng mô-đun NPM onchange.
Chúng tôi cũng thấy việc sử dụng mô-đun shell song song để thực hiện
nhiều kịch bản NPM đồng thời trong cửa sổ thiết bị đầu cuối của chúng tôi.
Đây là một điểm tốt để bạn thực hiện một nhận xét Git với thông báo “NPM Scripts Part 1".