Hãy tiếp tục cằn nhằn của chúng tôi.
Như chúng ta đã làm trong phần thứ hai của bài tập kịch bản NPM,
trong phần thứ hai của bài tập grunt đó,
chúng ta sẽ cấu hình chính xác các nhiệm vụ tương tự.
Chúng tôi sẽ làm sạch thư mục phân phối,
sao chép các phông chữ vào thư mục phân phối,
sau đó chúng tôi cũng sẽ làm thu nhỏ hình ảnh của chúng tôi bằng imagemin,
và sau đó cuối cùng sử dụng nhiệm vụ usemin để xây dựng và chuẩn bị thư mục phân phối của chúng tôi.
Tiếp tục với bài tập của chúng
tôi, tôi sẽ cài đặt một vài mô-đun grunt.
Vì vậy, hãy cài đặt NPM, cài đặt-grunt-contrib-copy.
Điều này được sử dụng để sao chép các tập tin và sau đó grunt-contrib-sạch,
và trừ đi tiết kiệm dev.
Và một khi hai cái này được cài đặt,
sau đó chúng ta sẽ tiếp tục và cấu hình các nhiệm vụ tương ứng.
Đi đến tập tin grunt của bạn,
chúng tôi sẽ thêm vào cấu hình cho cả bản sao và các nhiệm vụ sạch.
Vì vậy, bắt đầu với dấu phẩy,
luôn luôn nhớ không quên dấu phẩy.
Nó sẽ quay lại để cắn anh vào những lúc sai lầm nếu anh làm vậy.
Vì vậy, hãy thiết lập nhiệm vụ sao chép.
Đối với bản sao, usemin mong đợi chúng tôi cũng giữ
các tập tin HTML của chúng tôi sao chép vào thư mục phân phối để
nó có thể thực hiện thao tác trên đó.
Vì vậy, trong trường hợp này,
chúng ta sẽ đầu tiên sao chép
các tập tin HTML từ thư mục dự án của chúng tôi vào thư mục phân phối.
Vì vậy, để làm sao chép,
tôi sẽ thiết lập một phần HTML của nó.
Vì vậy, đây là nơi chúng tôi sẽ sử dụng một
số cú pháp grunt để xác định các tập tin cần phải được sao chép.
Vì vậy, tôi nói các tập tin và cũng chỉ định các
dấu ngoặc phải, trái và phải có vì vậy trong này,
tôi cần phải xác định bây giờ cấu hình nhất định.
Vì vậy, tôi có thể nói, mở rộng true và dot true, sau đó CWD,
thư mục làm việc hiện tại là dấu gạch chéo chấm,
và sau đó,
chúng tôi sẽ cấu hình tiếp theo đó là SRC, các tập tin nguồn,
và sau đó các tập tin nguồn là star.html,
tất cả các tập tin HTML,
và sau đó chúng tôi sẽ sao chép chúng vào thư mục dist.
Vì vậy, đó là lý do tại sao điểm đến được đặt vào thư mục phân phối ở đây.
Vì vậy, với thiết lập này,
nhiệm vụ sao chép của tôi sẽ sao chép tất cả các tệp HTML vào thư mục phân phối.
Bây giờ cùng với đó, chúng ta cũng cần phải sao chép các phông chữ.
Vì vậy, tôi sẽ thiết lập cái thứ hai cho các phông chữ.
Vì vậy, tôi chỉ định phông chữ và sau đó ở đây tôi cũng cần phải chỉ định
các tập tin cần phải được sao chép và vì vậy chúng tôi nói
các tập tin, và sau đó đây là
một số tham số cấu hình mà bạn cần phải thiết lập cho tác vụ sao chép.
Bây giờ, nếu bạn cần phải hiểu,
sau đó bằng cách đọc tài liệu cho plugin grunt tương ứng,
bạn sẽ có thể tìm ra điều này và do đó hoặc bạn
chỉ có thể làm theo ví dụ mà tôi đang đưa ra ở đây.
Vì vậy, chấm true, và sau đó CWD,
thư mục làm việc hiện tại là node module và font chữ awesome.
Vì vậy, đó là nơi tôi sẽ sao chép các tập tin từ,
và sau đó nguồn của các tập tin là fontsstar.star, đó là
những tập tin mà tôi cần phải sao chép,
và đích là thư mục phân phối.
Vì vậy, với điều này, tôi đã thiết lập nhiệm vụ sao chép của tôi để sao chép
cả hai tập tin HTML và các tập tin phông chữ vào thư mục phân phối của tôi.
Bây giờ, nhiệm vụ tiếp theo mà tôi sẽ thiết lập là nhiệm vụ sạch sẽ.
Vì vậy, để tôi cấu hình các nhiệm vụ sạch sẽ.
Đối với nhiệm vụ sạch sẽ, tôi sẽ cấu hình xây dựng,
và sau đó tôi sẽ nói nguồn là thư mục phân phối.
Vì vậy, về cơ bản chỉ định rằng thư mục phân phối nên được làm sạch.
Vì vậy, bây giờ chúng tôi đã thiết lập bản sao và các nhiệm vụ sạch, vì vậy chúng ta hãy lưu các thay đổi.
Nhiệm vụ tiếp theo mà tôi sẽ thiết lập là nhiệm vụ imagemin.
Đây là những gì chúng tôi sẽ sử dụng để nén và sao chép các hình ảnh vào thư mục phân phối.
Để bắt đầu với nhiệm vụ imagemin, bước đầu tiên,
cài đặt plugin grunt tương ứng.
Vì vậy, grunt-contrib-imagemin, trừ đi save.dev.
Và một khi đã được cài đặt,
sau đó chúng tôi sẽ tiếp tục và cấu hình nhiệm vụ imagemin tương ứng.
Đi đến tập tin grunt của chúng tôi sau khi cấu hình cho nhiệm vụ sạch,
tôi sẽ cấu hình nhiệm vụ imagemin.
Vì vậy, tôi sẽ nói imagemin,
và sau đó ngay trong đó,
tôi sẽ chỉ định động,
và bên trong đó tôi sẽ chỉ định các tập tin để bạn có thể
thấy rằng đặc điểm kỹ thuật tập tin sẽ tương tự.
Tôi muốn nói, mở rộng true,
sau đó CWD là thư mục hiện tại.
Sau đó, nguồn của các tập tin là imagestar.
và sau đó trong dấu ngoặc đơn, trong dấu ngoặc đơn,
tôi chỉ định PNG, GIF và JPG.
Vì vậy, về cơ bản, bạn có thể thấy các tập tin mô hình toàn cầu ở đây.
Vì vậy, nó nói bất kỳ
tập tin PNG, GIF, hoặc JPG phù hợp với mô hình này và sau đó
bắt đầu dấu chấm có nghĩa là tất cả các tập tin của mô hình đó
, và nguồn, và đích,
tôi đặt làm thư mục phân phối.
Vì vậy, với điều này, chúng tôi đã cấu hình bản sao của chúng tôi,
sạch và imagemin nhiệm vụ.
Hãy cấu hình một nhiệm vụ ở đây được gọi là xây dựng.
Vì vậy, tôi sẽ nói, đăng ký nhiệm vụ,
grunt đăng ký nhiệm vụ và sau đó tôi sẽ đặt tên cho nhiệm vụ như xây dựng,
và sau đó bên trong này,
chúng tôi sẽ chỉ định các bước thiết lập để được thực hiện bởi nhiệm vụ xây dựng.
Vì vậy, ngay tại đó, dấu chấm phẩy và sau đó trong đó,
tôi sẽ chỉ định ba nhiệm vụ trong trình tự mà họ nên được thực hiện.
Đầu tiên, tôi sẽ nói, sạch sẽ.
Vì vậy, chúng tôi sẽ dọn dẹp thư mục phân phối
và sau đó bắt đầu xây dựng lại thư mục phân phối.
Làm sạch, sau đó nhiệm vụ tiếp theo sẽ được
sao chép và sau đó tôi sẽ làm, imagemin.
Vì vậy, ba nhiệm vụ được cấu hình ở đây.
Vì vậy, với điều này, để tôi lưu lại những thay đổi.
Để xem thứ này hoạt động như thế nào.
Bây giờ, đi đến dấu nhắc nếu tôi gõ,
grunt và xây dựng, bạn sẽ thấy rằng nó sẽ đầu tiên làm sạch,
sau đó để làm bản sao và làm nhiệm vụ imagemin.
Vì vậy, nó thực hiện tất cả ba và sau đó bạn sẽ ngay lập tức thấy rằng
thư mục phân phối được xây dựng trong thư mục dự án của tôi ở đây.
Và bên trong thư mục phân phối bạn có thể thấy rằng các phông chữ đã được sao chép,
các hình ảnh đã được sao chép và
ba tệp HTML đã được sao chép vào thư mục phân phối.
Anh chỉ ở đó nửa đường thôi.
Bây giờ, chúng ta cần để có thể xử lý các tập tin này bằng cách sử dụng plugin usemin.
Vì vậy, chúng ta hãy đi đến điều đó tiếp theo.
Bây giờ, tôi sẽ cài đặt một vài mô-đun NPM
hữu ích cho việc xây dựng thư mục phân phối.
Vì vậy, để làm điều đó, tôi sẽ nói NPM cài đặt.
Tôi có thể chỉ định một tập hợp các mô-đun ở đây vì vậy,
tôi sẽ nói, grunt-contrib-concat.
Vì vậy, điều này được sử dụng để nối các tập tin, sau đó grunt-contrib-cssmin,
grunt-contrib-htmlmin, sau đó nói, grunt-contrib-uglify.
Sau đó grunt-filerev.
Bạn sẽ thấy lý do sử dụng filerev trong một thời gian ngắn,
và sau đó grunt-usemin, và lưu def và sau đó,
cài đặt tất cả các mô-đun grunt này.
Một khi tất cả chúng đã được cài đặt,
bước tiếp theo là đi và cấu hình,
usemin nhiệm vụ mà cũng sử dụng
cssmin Uglify Concat nhiệm vụ để thực hiện việc xây dựng thư mục phân phối.
Bây giờ, cho phép tiến hành trước cấu hình tác vụ usemin.
Vì vậy, đi trở lại tập tin grunt sau imagemin,
tôi sẽ thêm vào nhiệm vụ tiếp theo cho usemin để làm việc với grunt.
Nhiệm vụ đầu tiên mà tôi cần cấu hình được gọi là UseminPrepare.
Nhiệm vụ UseminPrepare này sẽ chuẩn bị các tập tin và sau đó cũng cấu hình
ConCache CSS min và uglify và file ref plugin,
để họ có thể làm công việc của họ một cách chính xác.
Vì vậy, đó là lý do cho UseminPrepare.
Vì vậy, đây là cách cấp usemin plugin đã được thiết kế.
Hơi khác với cách usemin mà chúng tôi sử dụng với các kịch bản trò chơi kết thúc wooks.
Vì vậy, trong useminPrepare,
chỉ cần một số tên ngẫu nhiên mà tôi sẽ sử dụng và sau đó nói đích là dist.
Và sau đó tôi sẽ chỉ định nguồn như tất cả các tập tin html ở đây.
Vì vậy, tôi sẽ nói contactus.html,
aboutus.html, và index.html.
Vì vậy, tất cả ba tập tin này cần phải được xử lý.
Phần tiếp theo của cấu hình usemin này, U
seminPrepare cấu hình là nơi tôi chỉ định các tùy chọn.
Đây là một cái gì đó tôi đã tìm ra bằng cách thử nghiệm và sai lầm.
Chỉ cần làm theo các bước.
Vì vậy, tôi cần phải cấu hình
một vài điều ở đây bên trong nơi tôi cần phải cấu hình một cái gì đó gọi là Flow.
Và sau đó bên trong đó tôi cần phải cấu hình một phần gọi là bước,
và sau đó ở đây tôi chỉ định các bước ở đây và sau đó nói cssmin,
và sau đó tôi sẽ nói js là uglify.
Vì vậy, đây là một cái gì đó mà tôi cần phải xác định ở đây và sau đó sau này tôi nói bài viết,
và ở đây tôi có thể cho phép điều này để cung cấp
một số tùy chọn cho nhiệm vụ cụ thể của họ mà tôi đã cấu hình.
Vì vậy, tôi cung cấp một số tùy chọn bổ sung cho css.
Vì vậy, đó là cung cấp bên trong của bài viết ở đây.
Bây giờ một lần nữa, đây là cách cấu hình phải được thực hiện.
Vì vậy, chúng tôi chỉ học được nó bằng cách nhìn vào tài liệu ở đó.
Vì vậy, ở đây bên trong bài css,
tôi sẽ chỉ định một tên như cssmin.
Cho đến nay đây là nhiệm vụ cssmin.
Tôi sẽ nói CreateConfig:
khối ngữ cảnh chức năng, và sau đó bên trong những chức năng
tôi phải cung cấp các thông số nhất định.
Vì vậy, tôi sẽ nói var
tạo ra tùy chọn bối cảnh máy phát điện.
Vì vậy, đây là một số biến JavaScript mà tôi cần phải
xác định có, đối tượng JavaScript về cơ bản.
Vì vậy, đối tượng này chứa thuộc tính này được gọi là tùy chọn,
nơi tôi có thể chỉ định một số tùy chọn được thông qua
vào CSS phút giao nhiệm vụ của usemin chuẩn bị nhiệm vụ.
Vì vậy, trong đó, giữ
bình luận đặc biệt và sau đó,
rebase là sai.
Rõ ràng tôi cần phải cung cấp điều này để cho nhiệm vụ cssmin của tôi hiện đang xử lý
các sửa đổi phông chữ tuyệt vời và bao gồm trong các tập tin nối.
Nếu tôi không làm điều này,
nó có vẻ để phá vỡ phông chữ tuyệt vời và đây là một cái gì đó mà tôi đã tìm ra,
bằng cách làm một chút
nghiên cứu về tràn ngăn xếp và một số trong những nơi này và tìm ra
rằng vấn đề của họ đang được gây ra với phông chữ awesome có thể được
cố định bằng cách bao gồm điều này vào cấu hình grunt của tôi.
Vì vậy, một lần nữa tôi vừa tìm kiếm
những gợi ý từ một số người đã cố gắng và để khắc phục vấn đề.
Vì vậy, nếu bạn gặp phải các vấn đề như thế
này, đây là một cách để giải quyết các vấn đề có thể phát sinh khi bạn đang
làm việc với các công cụ khác nhau.
Hãy để tôi thêm vào nhiệm vụ tiếp theo cho Concat.
Tôi sẽ chỉ định một số điều ở đây và các tùy chọn.
Tôi chỉ định dấu chấm phẩy
này, vì vậy đây là một cái gì đó mà tôi cần phải xác định cho Concat,
và sau đó cũng sau khi
tùy chọn tôi chỉ định dist là rỗng.
Bây giờ tùy chọn Concat này sẽ được cấu hình bởi UseminPrepare chạy trước đó.
Vì vậy, chúng tôi có thể để hầu hết nó trống ở
đó, và sau đó đó sẽ được cấu hình lại bởi useminPrepare.
Cái tiếp theo là xấu xí.
Bên trong uglify cũng tôi chỉ cần xác định quận này là trống rỗng.
Nếu tôi không chỉ định những điều này,
thì nhiệm vụ usemin không hoạt động chính xác.
Vì vậy, đó là lý do tại sao tôi cần phải xác định tất cả những điều này một cách rõ ràng.
Vì vậy, đối với cssmin cũng tôi sẽ nói quận trống rỗng.
Và sau đó, nhiệm vụ tiếp theo mà tôi sẽ cấu hình được gọi là filerev.
Vì vậy, bạn đã thấy tôi cài đặt plugin filerev cho Grunt.
filerev này làm gì?
Những gì filerev làm là khi usemin chuẩn bị tập tin main.css và main.js,
những gì filerev làm là nó thêm một phần mở rộng bổ sung cho tên chính đó,
để khi bạn chuẩn bị một phiên bản mới của trang web của bạn và tải nó lên trang web,
trong trường hợp ai đó đã nhìn thấy trang web của bạn trước
đó, sau đó trình duyệt của họ có thể đã lấy tiền mặt các tập tin main.css và main.js.
Nếu bạn không đính kèm filerev này những gì xảy ra là,
trình duyệt bên dưới tải phiên bản mới của trang web của bạn.
Nó có thể không tải xuống tệp main.js và main.css
vì nó tìm thấy chúng đã có trong bộ nhớ cache cục bộ.
Vì vậy, trang web của bạn có thể không được hiển thị chính xác.
Vì vậy, để giải quyết vấn đề,
những gì chúng tôi làm là mỗi khi chúng tôi chuẩn bị một thư mục phân phối mới,
chúng tôi sẽ thêm một bản sửa đổi tệp.
Đó là những gì filerev viết tắt của,
số sửa đổi tập tin,
như là một phần mở rộng bổ sung cho tên của những tập tin css và js.
Các tập tin chính.ss và main.js chuẩn bị sẵn.
Vì vậy, đó là những gì filerev làm.
Bây giờ làm thế nào để filerev này có thể tính toán giá trị này?
Phải mất nội dung của các tập tin này và sau đó thực hiện một số xử lý và sau đó tạo ra
một md5 nén 20 ký tự số mà sẽ được đính kèm vào các tập tin chính.
Vì vậy, tôi sẽ cấu hình phần đó ở đây.
Vì vậy, trong các tùy chọn,
tôi chỉ định ở đây nói như thế nào nó được cho là để tính toán số này ở đó.
Vì vậy, tôi nói mã hóa utf8,
và sau đó tôi nói thuật toán rằng nó được sử dụng để tính toán băm này,
những gì chúng ta gọi là băm là md5.
Bây giờ, nó sẽ trở nên rõ ràng hơn khi chúng tôi thực sự chạy
các nhiệm vụ usemin và sau đó xem những gì nó làm, chiều dài 20.
Vì vậy, tôi sẽ trở lại và giải thích những gì điều này
làm khi chúng tôi thực sự chạy nhiệm vụ usemin.
Vì vậy, để tôi hoàn thành các lựa chọn ở đây và sau đó tôi sẽ nói giải phóng.
Vì vậy, tôi cần phải thiết lập một vài điều nữa ở đây và sau đó phát hành,
và sau đó tôi cần phải xác định các tập tin mà filerev của tôi nên hành động.
Vì vậy, tôi sẽ nói các tập tin filerev.
Vậy, bên trong hồ sơ này.
Vì vậy, bạn đang bắt đầu nhìn thấy một mô hình theo cách mọi thứ được chỉ định ở đây.
Vì vậy, khi bạn chỉ định các tập tin ở đây,
bạn sẽ nói nguồn,
và sau đó trong đó bạn sẽ chỉ định dist CSS
và sau đó sao chấm CSS,
và sau đó là một quận js*.js tiếp theo.
Vì vậy, với điều này, bạn đã cấu hình filerev.
Vì vậy, phần filerev được cấu hình.
Và cuối cùng, chúng ta cần cấu hình nhiệm vụ usemin.
Vì vậy, để cấu hình nhiệm vụ usemin,
tôi đi xuống đây và nói usemin,
và ở đây cho phép tôi chỉ định một số tùy chọn cho nhiệm vụ usemin.
Vì vậy, ở đây tôi chỉ định html.
Vì vậy, ở đây tôi chỉ định cho nó những tập tin nó cần phải thay đổi,
nó cần phải cập nhật.
Vì vậy, các tập tin đã được sao chép vào thư mục phân phối.
Và cái cuối cùng là “dist/index.html”.
Vì vậy, đây là ba tập tin mà nó được cho là để xử lý,
và sau đó một số tùy chọn cho điều này ở đây.
Vì vậy, các tùy chọn tôi sẽ chỉ định “AssetsDIRs.”
Vì vậy, đây là nơi mà tất cả các tài sản mà tôi đang sử dụng tồn tại.
Vì vậy, CSS và các tập tin JavaScript tồn tại.
Vì vậy, tôi sẽ chỉ định “dist/css” và “dist/js.”
Với điều này, bạn đã hoàn thành cấu hình nhiệm vụ “usemin”.
Tiếp theo, chúng tôi định cấu hình nhiệm vụ “htmlmin”.
Đối với nhiệm vụ “htmlmin”,
chúng tôi đã chỉ định mục tiêu là “dist”, thư mục phân phối
và “htmlmin” được thực hiện trên
tất cả các tệp HTML nằm trong thư mục phân phối đó.
Các tùy chọn mà chúng tôi chỉ định cho trạng thái này, chúng ta sẽ nói,
“CollapsedWhiteSpace: True” có nghĩa là
tất cả các khoảng trắng trong các tập tin HTML sẽ bị thu gọn,
sao cho [không nghe được] chỉ chứa mã HTML tối thiểu ở đó.
Việc sửa đổi về cơ bản loại bỏ
tất cả các ký tự không liên quan từ các tập tin “htmlmin”.
Bây giờ, chúng tôi cũng chỉ định rằng từ điển của các tập tin,
những tập tin cần phải được cấu hình.
Điều này được xác định là đích, dấu hai chấm, nguồn.
Vì vậy, chúng ta chỉ định “dist/index.html”: “dist/index.html”,
có nghĩa là “index.html” trong thư mục phân phối
sẽ [không nghe được] và sau đó đưa trở lại vào tập tin “index.html”,
cũng trong thư mục phân phối.
Tương tự như vậy, “contactus.html” được chỉ định ở đó và sau đó là
“aboutus.html” cũng được chỉ định như thể hiện trong danh sách các tập tin đó.
Lý do tại sao chúng ta thực hiện “htmlmin” sau khi chúng ta kết thúc “usemin”
là vì “usemin” sẽ thay thế tất cả
các tập lệnh bằng tập tin “.js” chính và cả tất cả các
mã CSS đó nối và kết hợp và thay thế bằng tập tin “.css” chính.
Vì vậy, “htmlmin” sẽ được thực hiện trên
các tập tin HTML kết quả sau khi “usemin” đã hoàn thành công việc của nó.
Đây là cách nó hoạt động trong Grunt.
Vì vậy, Grunt “htmlmin” phải được áp dụng sau khi “usemin” đã hoàn thành công việc của mình.
Vì vậy, một khi tất cả những được cấu hình,
sau đó một bước nhỏ mà tôi cần phải làm là quay trở lại đây,
và sau đó nơi chúng tôi chỉ định cho “jit-grunt”,
chúng ta cần phải xác định rằng điều này “jit-grunt”,
bạn nhớ lại rằng chúng tôi giới thiệu một cái gì đó gọi là
“useminPrepare” [không nghe được] vì vậy bạn cần phải thông báo cho “jit-grunt”
nói rằng cấu hình “UseminPrepare” mà chúng tôi giới thiệu sẽ được
xử lý bởi plugin “grunt-usemin” đó.
Vì vậy, tôi cần phải xác định rõ ràng,
nếu không “jit-grunt” sẽ nhìn xung quanh cho một “UseminPrepare” Grunt plugin.
Vì vậy, để xác định rằng,
tôi sẽ nói “useminPrepare” và nói “grunt-usemin”,
về cơ bản thông báo “jit-grunt” nói rằng “useminPrepare” sẽ được
xử lý bởi “grunt-usemin” plugin đó.
Cuối cùng, hãy cấu hình lại nhiệm vụ “xây dựng” ở phía dưới.
Đi xuống nhiệm vụ “xây dựng” đó sau “imagemin”.
Vì vậy, chúng tôi đã làm “sạch”, “sao chép”, “imagemin”,
sau đó nhiệm vụ tiếp theo mà tôi nên thực hiện là “UseminPrepare” và sau đó sau khi
“UseminPrepare” thực hiện “liên lạc”, sau đó tôi thực hiện “cssmin”,
sau đó tôi thực hiện “uglify”.
Vì vậy, bạn thấy rằng chúng ta phải thực hiện chúng trong một tập hợp các bước nhất định.
Một khi “cssmin” và “uglify” chạy,
sau đó các tập tin “.css” chính và các tập tin “.js” chính sẽ được tạo ra.
Vì vậy, tại thời điểm này, tôi sẽ chạy
“filerev” và sau đó cuối cùng tôi chạy nhiệm vụ “usemin”.
Vì vậy, bạn thấy những bí mật: “sạch”, “sao chép”,
“imagemin”, “useminPrepare”, “concat”, “cssmin”, “uglify”.
Tại thời điểm này, các tập tin “.css” và “.js”,
các tập tin “.css” chính và các tập tin “.js” chính đã sẵn sàng.
Tôi có thể làm “filerev” trên chúng và sau đó cuối cùng chạy “usemin”.
Nhưng điều này, chúng ta hãy lưu các thay đổi và sau đó đi và
xem nhiệm vụ “xây dựng” thực sự chuẩn bị phân phối như thế nào.
[ không nghe được] Đi đến thiết bị đầu cuối của chúng tôi,
tại dấu nhắc tôi gõ “grunt build” và sau đó chờ cho tất cả các nhiệm vụ được thực hiện.
Vì vậy, bạn sẽ thấy rằng nó sẽ chạy qua tất cả các tập hợp các nhiệm vụ,
và sau đó cuối cùng khi nó được thực hiện,
nó sẽ chỉ đơn giản chỉ định rằng tất cả các nhiệm vụ được thực hiện.
Vì vậy, nếu bạn muốn quay trở lại và nhìn vào chuỗi các nhiệm vụ đã được hoàn thành,
bạn chỉ có thể cuộn lại và xem nó làm gì.
Nó lần đầu tiên làm sạch,
sau đó nó sao chép các tập tin HTML,
sau đó nó sao chép
các tập tin phông chữ, sau
đó nó thực hiện nhiệm vụ “imagemin”,
sau đó nó thực hiện “UseminPrepare”,
sau đó nó thực hiện “concat”,
cả việc phân phối và tạo ra,
và sau đó nó thực hiện” uglify”,
sau đó “uglify” nhiệm vụ, sau đó nó chạy “filerev” và sau đó cuối cùng là nhiệm vụ “usemin”.
Và sau đó thư mục phân phối của chúng tôi bây giờ đã sẵn sàng.
Đ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 đã được chuẩn bị.
Hãy xem xét cụ thể các tập tin “.css” và chính “.js”.
Lưu ý tên của các tập tin này.
Chú ý rằng sau khi chính,
có một dấu chấm và sau đó có
một băm 20 ký tự đã được thêm vào bởi “filerev” ở đây.
Vì vậy, những gì xảy ra là nếu tôi chuẩn bị một thư mục phân phối mới,
mỗi khi tôi chuẩn bị thư mục phân phối mới, băm này thay đổi,
có nghĩa là mỗi lần tôi triển khai một phiên bản mới của trang web của tôi,
nếu bất kỳ trình duyệt trước đây đã xem trang web của tôi thì các mục bộ nhớ cache của họ,
nơi họ có thể đã lưu trữ chính “.css” và chính “.js” đã trở nên
vô hiệu bởi vì chúng ta có một phiên bản mới của chính “.css” và chính “.js”.
Vì vậy, trình duyệt sẽ tải lại những điều này.
Tôi đã không hiển thị các “filerev” với các kịch bản NPM,
nhưng tôi chỉ cần thêm nó vào đây chỉ để cho bạn thấy làm thế nào nó được thực hiện với Grunt.
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.
Chúng ta hãy xem nhanh trang web trong trình duyệt của chúng tôi.
Đi đến trình duyệt của
bạn, bạn có thể thấy rằng tôi đang tải trong “dist/index.html”.
Vì vậy, đây là từ thư mục phân phối,
vì vậy tôi đang kiểm tra và nó có vẻ tốt.
“ aboutus.html” cũng trông tốt, giống như trước đây.
Và trang liên hệ cũng có vẻ chuẩn bị tốt cho việc triển khai.
Vì vậy, với điều này, chúng tôi hoàn thành bài tập này.
Sau tất cả những tiếng cằn nhằn,
tôi chắc là bạn cần phải hít thở.
Trước khi bạn làm điều đó, hãy chắc chắn để làm một bình luận tốt với thông điệp “Grunt Phần hai.”