1. Gulp là gì?

GULPhường là một tool cung cấp Front-kết thúc, hỗ trợ cho câu hỏi cải cách và phát triển Web – App trở cần dễ dãi rộng bởi cách:

Tạo ra một server ảo nhằm cải cách và phát triển phầm mềm.Tự rượu cồn reload lại VPS ảo này mọi khi thay đổi một tệp tin cùng lưu lại.Giúp thực hiện Preprocessors CSS nhỏng SASS tốt LESS.Optimize lại phần CSS, JS thậm chí còn cả ảnh.

Bạn đang xem: Gulp là gì?

*

Vậy nếu tạo ra ứng dụng bởi CLI của những framework nhỏng Angular-cli, Vue-cli… thì có yêu cầu sử dụng GULPhường không?

Câu vấn đáp là trường hợp cần sử dụng lệnh CLI thì không phải config Gulp (vị vẫn hỗ trợ 4 công dụng tương tự Gulp). Nhưng nếu không sử dụng CLI nhưng từ tạo ứng dụng bằng tay, hay vào dự án công trình ko cần sử dụng framework nhưng mà muốn gồm xúc cảm nhỏng framework thì nên dùng thêm GULPhường, rất có thể đây vẫn là trợ thủ đắc lực của bạn đó!

Cài đặt

Yêu cầu trước tiên và buộc phải là cần cài NodeJS.

Hãy init một project dự án cùng với câu lệnh npm init -y và sau khoản thời gian làm vậy, bạn đã sở hữu phần khởi chế tạo là file package.json ban đầu.

package.json

*

Tiếp theo, setup GULPhường bằng phương pháp chạy lệnh.

*

Vì ko mua GULP.. nghỉ ngơi global buộc phải bắt buộc config thêm nhỏng sau:

package.json

*

Hãy chú ý phần scripts phía bên trên cùng chạy thử nlỗi sau:

*

Vậy nên, chúng ta đang thiết đặt thành công xuất sắc và hãy tạo thành file gulptệp tin.js nhằm chứa config GULPhường nhé. Cùng viết một hàm nthêm giúp thấy log như sau:

gulptệp tin.js

*

Sau đó chạy lệnh đang config ta sẽ tiến hành kết quả nlỗi sau.

*

3. Thực hành với coi kết quả

a. Cấu hình task

Đối cùng với version trước đây, bọn họ vẫn sử dụng task properties của GULP để có mang các task khác nhau. Nhưng từ version 4, chúng ta vẫn cần sử dụng rất nhiều function nhằm biểu thị những task như: Chuyển SCSS thành CSS, chuyển ES6+ thành ES5…

Có hai loại task: đặt theo tên cùng default, nhị các loại này chỉ khác nhau sinh sống bí quyết phối properties ở Exports object.

Đối với nhiều loại đặt theo tên:

*

Đối cùng với nhiều loại default:

*

lúc chạy, ta sẽ sở hữu 2 kết quả không giống nhau nlỗi sau đây. Loại mặc định sẽ không đề nghị thêm thương hiệu, cơ mà một số loại mang tên thì cần phải Điện thoại tư vấn tên.

*

b. Chuyển đổi với buổi tối ưu CSS preprocessor

Các trang web hiện đại đa số sử dụng các CSS preprocessor như thể SCSS, LESS… nhưng mà trình để mắt tới cấp thiết gọi được hầu như nhiều loại này phải sẽ phải chuyển thành các CSS thường thì.

Chúng ta buộc phải setup thêm 1 Package để triển khai việc này: gulp-sass , Khi thiết lập kết thúc hãy config lại file gulptệp tin.js.

gulptệp tin.js

*

Kết quả như sau:

*

Để chuyển code CSS trên thành một loại độc nhất hãy sở hữu thêm gulp-cananao và tiếp đến config lại gulptệp tin.js.

gulpfile.js

*

c. Tối ưu ảnh chụp

Ví dụ: một hình ảnh chụp trường đoản cú điện thoại/sản phẩm hình ảnh thì dung lượng có thể từ bỏ vài ba MB đến vài chục MB. Nhưng sau khi gửi bởi Message tuyệt Skype thì hình họa chỉ từ vài trăm KB, vì rất nhiều vận dụng này đang xóa đi các thông tin ko quan trọng trong hình họa.

Tương từ, vào hình họa không chỉ là tất cả hình Ngoài ra không hề ít lên tiếng không quan trọng khác mang đến việc hiển thị, vị vậy chúng ta cũng hoàn toàn có thể optimize phần này sẽ giúp đỡ App nhẹ hơn, load nkhô cứng rộng.

Hãy thiết lập thêm gulp-image với chỉnh lại file gulptệp tin.js như sau:

gulptệp tin.js

*

khi chạy lệnh dứt, các bạn sẽ thấy log nhỏng dưới đây, vậy là một trong những phần kích cỡ ảnh đã được rút ngắn. Mỗi hình ảnh được tối ưu một ít sẽ giúp đỡ toàn cục phầm mềm chạy nkhô giòn và mượt mà rộng.

Xem thêm: Ngày Sinh Thần Là Gì - Câu Sinh Thần Nghĩa Là Gì

*

Sau lúc tối ưu, một số trong những báo cáo bên trong ảnh bị xóa đi và điều đó hình ảnh đang nhẹ hơn và vẫn hiển thị thông thường.

d. Tối ưu cùng biến đổi phiên phiên bản tệp tin JavaScript

Hai phần chính vào phần này là Tối ưu code và đổi khác JS code từ ES6+ thành phiên bản nhỏ dại hơn.

Khi Tối ưu code, hãy mua thêm gulp-uglify nhằm đưa tệp tin JS thành 1 tệp tin duy nhất và nối lại thành một loại.

gulptệp tin.js

*

Chạy lệnh chấm dứt, ta thấy file js được nối lại thành 1 tệp tin.

*

Với phần gửi code ES6+ về phiên bản cũ hơn, bạn phải cài thêm một số plugin.

*

Sau kia hãy thuộc config lại tệp tin gulpfile.js cùng tự đây rất có thể code theo thể ES6+.

*

Sau khi chạy ta đã chiếm được kết quả ví như sau:

*

e. Theo dõi các tệp tin gồm chũm đổi

Trong phần này, họ sẽ config nhằm lúc thay đổi tệp tin và tiến hành giữ thì Gulp chạy lại các tệp tin, đổi khác lại thành các định hình ước muốn.

trước hết hãy thay đổi lại tệp tin gulpfile.js thành nhỏng sau:

gulpfile.js

*

Tại phía trên, ta phân chia config các tệp tin JS giỏi CSS thành các phần không giống nhau cùng tiếp nối quan sát và theo dõi bọn chúng với export như default. Sau Khi config chấm dứt ta sẽ có được công dụng như sau:

*

f. Tự động sở hữu lại với Đồng cỗ Trình phê duyệt (Browser Sync)

Ở phần này chúng ta sẽ tạo nên một VPS ảo cùng mỗi lúc chuyển đổi file thì VPS này sẽ load lại một lần. Trong phần này bọn họ cũng học bí quyết tích vừa lòng thêm Optimize CSS và Optimize JS để xem kết quả Lúc triển khai phối kết hợp.

Hãy chuyển đổi lại file gulpfile.js thành như sau:

gulpfile.js

*
*

Như đang thấy, vào hàm exports default, bằng phương pháp chạy scripts() cùng styles() ta sẽ tạo các tệp tin trong thư mục output. Sau đó ta tạo thành browser nhằm lắp phần nghỉ ngơi output này vào, tiếp kia xem xét file nào biến đổi thì đã đến chạy lại browser bằng cách cho các tasks: scripts với styles vào watch cùng với điều kiện là tôi đã config reload: true bên phía trong mỗi task.

lúc config chấm dứt bạn sẽ cảm nhận kết quả nlỗi sau (làm việc ví dụ này chỉ add CSS):

*

g. Xửtrong Gulp

Nội dung vào phần này là parallel() và series() , đấy là 2 phương pháp để chạy các task tuần từ bỏ hoặc tuy vậy tuy nhiên trong Gulp.

series() tức là những task sẽ chạy theo đồ vật từ task a chạy chấm dứt, task b được chạy tiếp. Hãy biến hóa gulptệp tin.js với quan liền kề sự thay đổi nhé.

gulptệp tin.js

*

Chạy lệnh hoàn thành, bạn hãy chăm chú phần Starting cùng Finished sinh hoạt dưới chiếc Terminal.

*

parallel() tức là những task sẽ tiến hành chạy tuy nhiên tuy vậy, không có thứ từ như thế nào với cũng không bắt buộc đợi task trước chạy dứt rồi bắt đầu mang đến task sau, hãy thay đổi lại tệp tin gulpfile.js cùng xem xét lại sự biến đổi làm sao.

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *