Bây giờ là lúc để chuyển sang phần thứ hai của bài tập Gulp.
Chúng tôi sẽ tiếp tục thực hiện các bước tương tự như chúng tôi đã làm
trong phần thứ hai của bài tập kịch bản NPM và bài tập hiện tại.
Vì vậy, chúng tôi sẽ sắp xếp để xóa thư mục phân phối sau đó sao chép các phông chữ,
sau đó cũng xây dựng lại thư mục phân phối,
sử dụng các mô-đun nút tương tự
như những gì chúng tôi đã sử dụng cho Grant và cả các kịch bản NPM.
Bước tiếp theo của chúng tôi là thiết lập các tác vụ để xóa
thư mục phân phối và cũng sao chép các phông chữ vào thư mục phân phối.
Vì vậy, chúng ta hãy thiết lập một vài mô-đun nút.
Người đầu tiên mà chúng tôi sẽ thiết lập được gọi là del.
Mô hình nút này cho phép bạn xóa một thư mục.
Và chúng ta hãy đi trước và thiết lập các nhiệm vụ Gulp.
Với Gulp, may mắn thay, chúng tôi không cần phải cài đặt một mô-đun khác vì lợi ích của việc sao chép
bởi vì các luồng Gulp cho phép chúng tôi làm việc sao chép các tập tin với ít nỗ lực.
Đi đến tập tin Gulp,
tôi sẽ giới thiệu mô-đun Gulp hỗn hợp,
mà tôi sẽ nói, del.
Và sau đó yêu cầu mô-đun del ở đây.
Vì vậy, một khi chúng ta yêu cầu mô-đun del ở đó,
chúng ta có thể đi trước và thiết lập các nhiệm vụ.
Vì vậy, chúng ta sẽ thiết lập nhiệm vụ sạch sẽ đầu tiên ở đây.
Vì vậy, ngay sau khi nhiệm vụ mặc định,
tôi sẽ thiết lập nhiệm vụ sạch sẽ.
Vì vậy, tôi sẽ nói, Gulp nhiệm vụ sạch.
Và như bạn có thể thấy,
điều này được thiết lập như là chức năng ở đó.
Và bên trong mà chúng ta sẽ nói, trở về del.
Và sau đó tham số được cung cấp là thư mục phân phối ở đây.
Vì vậy, điều này sẽ thiết lập nhiệm vụ sạch sẽ.
Và một khi nhiệm vụ này được chạy,
sau đó thư mục phân phối sẽ bị xóa.
Nhiệm vụ tiếp theo của chúng tôi là sao chép các phông chữ vào thư mục phân phối của chúng.
Vì vậy, tôi có thể nói, sao chép phông chữ.
Và như bạn thấy,
chúng tôi thiết lập chức năng ở đó và sau đó đóng chức năng.
Và sau đó ở đây, tôi chỉ đơn giản là sẽ nói,
Gulp nguồn và nút
module, phông chữ tuyệt vời, phông chữ.
Bạn có thể thấy tôi sử dụng các mô hình globbing, ngay đó.
Và sau đó một khi chúng tôi chọn tất cả các tập tin nguồn,
chúng tôi chỉ cần ống chúng vào tập tin đích.
Vì vậy, bạn nhận thấy rằng chúng tôi không cần
một mô-đun cụ thể để sắp xếp việc sao chép các tập tin.
Chúng tôi chỉ cần sử dụng nguồn Gulp và luồng đích
để có thể dẫn các tập tin từ vị trí nguồn đến vị trí đích.
Vì vậy, hai sẽ thiết lập các nhiệm vụ sạch và sao chép phông chữ nhiệm vụ.
Tiếp theo, chúng ta sẽ thiết lập mô-đun NPM cho nhiệm vụ imagemin.
Vì vậy, việc thu nhỏ và nén các hình ảnh.
Vì vậy, để làm điều đó thêm các loại nhắc Gulp imagemin.
Đây là plugin Gulp tương ứng với mô-đun nút imagemin.
Vì vậy, chúng tôi cài đặt như Gulp plugin,
mà cũng là module nút.
Vì vậy, một khi quá trình cài đặt hoàn tất,
hãy thiết lập nhiệm vụ imagemin đó.
Đi đến tập tin Gulp của
chúng tôi, chúng tôi sẽ thiết lập nhiệm vụ imagemin ở đây.
Vì vậy, chúng tôi sẽ thiết lập các nhiệm vụ imagemin như chức năng.
Như bạn có thể thấy, cấu trúc của mã cho
định nghĩa tác vụ Gulp là khá nhiều tiêu chuẩn.
Vì vậy, bạn sẽ nói nguồn Gulp.
Chúng tôi chỉ định các tập tin nguồn ở đó và các tập tin nguồn
trong thư mục hình ảnh các
tập tin JPG, GIF và PNG từ đó.
Và sau đó ống dẫn chúng qua nhiệm vụ imagemin.
Và sau đó tôi sẽ thiết lập một số thông số ở đây.
Vì vậy, tôi sẽ thiết lập
mức tối ưu hóa đến ba, tiến bộ như đúng.
Vì vậy, điều này sẽ biến chúng thành những hình ảnh tiến bộ và xen kẽ.
Vì vậy, một khi điều này được thiết lập,
sau đó bước tiếp theo là để ống dẫn họ đến đích của họ.
Và điểm đến ở đây như bạn có thể thấy là thư mục hình ảnh trong thư mục phân phối.
Vì vậy, với điều này nhiệm vụ imagemin bây giờ được thiết lập.
Bây giờ, chúng ta sẽ xây dựng nhiệm vụ xây dựng ở đây.
Vì vậy, hãy để tôi thiết lập các nhiệm vụ xây dựng.
Vì vậy, đối với việc xây dựng nhiệm vụ,
những gì bạn muốn làm là trước tiên
thực hiện nhiệm vụ sạch trước khi
các nhiệm vụ còn lại được thực hiện
bởi vì chúng tôi muốn đầu tiên dọn dẹp thư mục phân phối.
Và điều đó phải được hoàn thành trước khi các nhiệm vụ còn lại được thực hiện.
Với Gulp, các nhiệm vụ được thực hiện song song tự động.
Và vì vậy nó có thể xảy ra rằng
nếu bạn thực hiện nhiệm vụ sạch song song với nhiệm vụ còn lại, nhiệm
vụ sạch sẽ có thể kết thúc sau
đó và sau đó xóa một số công việc đã được thực hiện bởi các nhiệm vụ còn lại.
Vì vậy, đó là lý do tại sao khi bạn chỉ định nhiệm vụ Gulp,
nếu bạn chỉ định sạch là một trong những đầu tiên trong,
như là tham số thứ hai ở đây,
thì điều đó có nghĩa là nhiệm vụ đó sẽ được hoàn thành đầu tiên.
Và sau đó các nhiệm vụ còn lại sẽ được thực hiện.
Vì vậy, tôi sẽ nói Gulp bắt đầu.
Với sự bắt đầu Gulp,
tất cả các nhiệm vụ mà chúng tôi chỉ định ở đây sẽ được thực hiện song song.
Vì vậy, tôi sẽ thực hiện nhiệm vụ sao chép phông chữ và cũng là nhiệm vụ imagemin với nhau.
Sau đó, chúng tôi sẽ thiết lập nhiệm vụ usemin và sau đó
thực hiện điều đó cũng cùng với phông chữ sao chép và imagemin.
Một điều cuối cùng mà tôi cần thêm vào trước khi chúng ta tiếp tục thực hiện
các nhiệm vụ là lên đây và sau đó yêu cầu imagemin.
Tôi có thể nói imagemin cần Gulp imagemin.
Và sau đó lưu các thay đổi.
Bây giờ chúng ta hãy đi trước và kiểm tra nhiệm vụ xây dựng.
Tại dấu nhắc, nếu loại Gulp xây dựng của bạn,
sau đó nó nên thực hiện tất cả ba nhiệm vụ.
Vì vậy, bạn sẽ thấy rằng nó bắt đầu nhiệm vụ sạch sẽ và
hoàn thành nó và sau đó nó bắt đầu nhiệm vụ xây dựng thực tế.
Vì vậy, bạn có thể thấy rằng bằng cách xác
định sạch sẽ được hoàn thành trước khi xây dựng thực tế xảy ra,
sau đó bạn chắc chắn rằng bạn đầu tiên làm sạch thư mục phân phối
sau đó xây dựng nhiệm vụ bao gồm các phông chữ sao chép và imagemin,
tất cả chúng hoàn thành song song sẽ được thực hiện sau đó.
Đi đến trình soạn thảo,
bạn sẽ thấy rằng trong thư mục phân phối,
chúng ta thấy rằng các phông chữ đã được sao chép và hình ảnh đã được sao chép chính xác.
Bước cuối cùng là thiết lập tác vụ usemin để xây dựng thư mục phân phối.
Để thiết lập họ usemin nhiệm vụ,
tôi sẽ cài đặt một vài plugin Gulp vì vậy tôi sẽ nói NPM cài đặt.
Và sau đó tôi sẽ cài đặt plugin file Gulp uglify,
mà rõ ràng cũng là một mô-đun nút.
Và sau đó tôi sẽ cài đặt mô-đun nút usemin và sau đó là mô-đun nút rev.
Mô-đun nút Gulp rev giống như biểu đồ tệp rev cấp plugin mà chúng ta đã thấy trước đó.
Nó hơi khác so với tập tin rev mà chúng ta đã thấy trước đó,
nhưng phục vụ cùng một mục đích.
Vì vậy, Gulp rev, sau đó tôi sẽ thiết lập Gulp CSS sạch và sau đó Gulp flatmap.
Bạn sẽ thấy lý do cho điều này như
chúng tôi - Chúng tôi thiết lập nhiệm vụ usemin của chúng tôi, vì vậy,
và gulp-html phút và chúng tôi đi trước và cài đặt các mô-đun ở đây.
Một khi các mô-đun được cài đặt, chúng
ta hãy đi trước và yêu cầu các mô-đun này trong gulpfile của chúng tôi và sau đó thiết lập nhiệm vụ usemin.
Đi đến gulpfile của chúng tôi ngay ở đầu trang,
tôi sẽ yêu cầu các mô-đun mà tôi vừa cài đặt.
Vì vậy, gulp uglify uglify uglify uglify.
Vì vậy, nhiệm vụ uglify sau đó
usemin nhiệm vụ gulp usemin,
sau đó sau đó
rev sau đó,
quên có, dấu phẩy ở đó.
Hãy rất cẩn thận để không bỏ lỡ những dấu phẩy ở đó.
Vì vậy, yêu cầu gulp clean-css, sau đó flatmap, và htmlmin.
Vì vậy, đây là những mô-đun gulp
mà chúng tôi đã cài đặt,
vì vậy hãy lưu các thay đổi và sau đó chúng tôi sẽ đi xuống và thiết lập nhiệm vụ usemin.
Đến dưới cùng của gulpfile,
ngay tại đó tôi sẽ thiết lập nhiệm vụ usemin.
Vì vậy, nhiệm vụ usemin làm gì?
Vì vậy, nhiệm vụ usemin mất
htmlfiles và sau đó tìm kiếm các khối CSS và JavaScript trong htmlfiles,
kết hợp, concatenates, và thu nhỏ và nuglifies các tập tin và sau đó
thay thế chúng bằng cách sử dụng các tập tin nối trong thư mục phân phối.
Vì vậy, để bắt đầu,
đầu tiên tôi sẽ bắt đầu bằng cách xác định nguồn gulp.
Vậy các tập tin nguồn ở đâu?
Vì vậy, các tập tin nguồn là các htmlfiles trong thư mục hiện tại.
Uống quá. /start.html, sau đó tôi sẽ
ống gulpfiles này thông qua mô-đun gulp này gọi là flatmap.
flatmap làm gì?
Flatmap mất nhiều htmlfiles và sau đó
khởi động lên đường ống song song cho mỗi một trong những htmlfiles.
Mỗi người trong số họ đi qua cùng một tập hợp các bước và sau đó cuối cùng,
hội tụ và sao chép nó vào thư mục đích.
Vì vậy, như bạn có thể thấy trong thư mục hiện tại của
chúng tôi, chúng tôi đã có contactus.html, aboutus.html và index.html.
Tất cả ba người trong số họ cần phải được xử lý.
Vì vậy, flatmap cho phép chúng ta xử lý chúng song song,
bắt đầu cùng một tập hợp các đường ống cho mỗi tập tin,
vì vậy đó là lý do tại sao tôi đang sử dụng các flatmap ở đó.
Vì vậy, flatmap, và sau đó bên trong flatmap tôi cần phải xác định các chức năng,
hai tham số; dòng, file.
Vì vậy, các tập tin về cơ bản mất mỗi một trong những tập tin nguồn mà chúng tôi đã chỉ định ở đó,
và sau đó xử lý chúng với cùng một tập hợp các chức năng ở đây,
và sau đó khởi động dòng riêng biệt của nó cho mỗi một trong số họ.
Vì vậy, tôi sẽ trở lại dòng,
và sau đó tôi sẽ ống mỗi một trong số này
thông qua các nhiệm vụ usemin mà chính nó,
bao gồm các css
và uglify JavaScript và html nhiệm vụ.
Vì vậy, đối với css, tôi sẽ thực hiện phần sửa đổi.
Vì vậy, phần css rõ ràng sẽ làm việc nối và thu nhỏ và như vậy,
và sau đó áp dụng các rev để mà nó hoạt động
rằng chuỗi 20 bit để các tập tin main.css có.
Vì vậy, đối với css tôi thiết lập rằng,
và sau đó cho html,
bởi vì tôi có nhiều tập tin html,
tôi cần phải xác định điều này như là một chức năng,
và bên trong chức năng này tôi sẽ nói trở lại htmlmin.
Và sau đó bên trong đó tôi sẽ cung cấp cho nó tham số CollapseWhiteSpace,
và tham số đó sẽ được thiết lập thành true.
Và vì vậy điều này về cơ bản hoàn thành phần html của nó.
Và sau đó tiếp theo là phần js của nó,
phần JavaScript của nó,
mà tôi cần phải làm uglify và sau đó sửa đổi cho nó.
Và sau đó, nếu tôi có
bất kỳ mã javascript nội tuyến thì tôi cần phải áp dụng
nhiệm vụ uglify cho điều đó,
và sau đó cho mã inlinecss,
tôi sẽ sử dụng nhiệm vụ CleanCSS ở đó với concat như là tham số ở đó.
Vì vậy, với điều này, tôi đã thiết lập nhiệm vụ usemin của tôi.
Vì vậy, nó sẽ phục vụ cho tất cả những hành động khác nhau thay mặt tôi.
Và sau đó một khi chúng được thực hiện cuối cùng,
các luồng kết quả sẽ được
piped đến thư mục phân phối.
Vì vậy, với điều này, nhiệm vụ usemin bây giờ là tất cả thiết lập.
Hãy để tôi lưu lại những thay đổi.
Và sau đó tôi sẽ đi xuống đến nhiệm vụ xây dựng và sau đó sau khi imagemin tôi sẽ cũng
thêm usemin là một trong những nhiệm vụ được thực hiện bởi nhiệm vụ xây dựng.
Vì vậy, với những thay đổi này, vì vậy,
chúng tôi đã sửa đổi nhiệm vụ xây dựng, chúng ta
hãy tiếp tục và sau đó kiểm tra xem thư mục phân phối được xây dựng đúng hay không.
Đi đến dấu nhắc, hãy để tôi gõ vào gulp
build và sau đó chờ cho gulp để xây dựng tất cả các nhiệm vụ khác nhau.
Nó sẽ mất một chút thời gian cho usemin để hoàn thành công việc của nó,
và khi nó được hoàn thành việc chuyển đổi,
sau đó thư mục phân phối của tôi bây giờ sẽ sẵn sàng để được xem.
Đi đến trình soạn thảo bây giờ bạn có thể thấy rằng thư mục phân phối đã được
chuẩn bị ở đây và bạn có thể thấy chỉ mục, contactus và aboutus.htmlfile.
Bạn có thể thấy rằng khi bạn mở index.htmlfile,
nó đã được nén.
Và htmlmin đã được thực hiện,
đặc biệt lưu ý cách tập tin css đã được thay thế
bằng css/main- và sau đó bạn sẽ thấy một chuỗi dài there.css.
Vì vậy, đây là giống như các tập tin rev mà bạn đã thấy trong grunt với mô-đun gulp rev,
đây là những gì nó làm với tên của tập tin.
Vì vậy, nếu bạn nhìn vào css bạn có thể thấy rằng tên của tập tin là gạch nối chính và
sau đó một số chuỗi có chấm css và tương tự cho javascriptfile.
Vì vậy, đây là những gì mô-đun gulp rev làm,
và sau đó tất cả ba tập tin này được chuẩn bị.
Chúng ta hãy nhìn vào các tập tin này trong trình duyệt.
Đi đến trình duyệt tôi có thể thấy rằng có các tệp nguồn đang được lưu một cách chính xác.
Để tôi kiểm tra thư mục phân phối.
Vì vậy, trong thư mục phân phối,
index.html đã được chuẩn bị bởi
tác vụ xây dựng gulp dường như đang hoạt động chính xác.
Hãy để tôi cũng kiểm tra trang về,
và chúng ta có thể thấy rằng về trang cũng được xây dựng một cách chính xác,
và cũng là trang liên hệ.
Vì vậy, bây giờ bạn có thể thấy rằng nhiệm vụ gulp của chúng tôi đã hoàn thành.
Vì vậy, 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 thiết lập việc dọn dẹp và
sao chép các tập tin phông chữ vào thư mục phân phối của chúng
tôi, chúng tôi đã thực hiện nhiệm vụ imagemin và sau đó cuối cùng chúng tôi thiết lập
nhiệm vụ usemin để xây dựng thư mục phân phối của chúng tôi.
Với điều này, chúng tôi hoàn thành bài tập này.
Đây có thể là thời điểm tốt cho bạn để làm một bình luận tốt với thông điệp Gulp phần hai.