Gulp là gì

     

1. Gulp là gì?

GULP là 1 trong tool cung cấp Front-end, giúp cho việc cải tiến và phát triển Web – phầm mềm trở nên thuận lợi hơn bằng cách:

Tạo ra một server ảo để cách tân và phát triển app.Tự rượu cồn reload lại server ảo này mỗi khi biến đổi một file cùng lưu.Giúp thực hiện Preprocessors CSS như SASS xuất xắc LESS.Optimize lại phần CSS, JS thậm chí là cả ảnh.

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

*

Vậy ví như tạo ứng dụng bằng CLI của các framework như Angular-cli, Vue-cli… thì tất cả phải dùng GULP không?

Câu vấn đáp là nếu sử dụng lệnh CLI thì không yêu cầu config Gulp (do đã cung ứng 4 tính năng tương từ Gulp). Nhưng nếu không dùng CLI nhưng mà tự tạo ứng dụng thủ công, tuyệt trong dự án không sử dụng framework mà muốn có cảm xúc như framework thì nên dùng thêm GULP, có thể đây vẫn là viện trợ đắc lực của bạn đó!

cài đặt đặt

Yêu cầu đầu tiên và đề nghị là yêu cầu cài NodeJS.

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

package.json

*

Tiếp theo, thiết đặt GULP bằng cách chạy lệnh.

*

Vì không sở hữu GULP ngơi nghỉ global nên yêu cầu config thêm như sau:

package.json

*

Hãy xem xét phần scripts phía trên và thử nghiệm như sau:

*

Như vậy, bọn họ đã thiết đặt thành công và hãy tạo thành file gulpfile.js để chứa config GULP nhé. Cùng viết một hàm ngắn giúp thấy log như sau:

gulpfile.js

*

Sau kia chạy lệnh sẽ config ta vẫn được công dụng như sau.

*

3. Thực hành cùng xem kết quả

a. Cấu hình task

Đối cùng với version trước đây, chúng ta sẽ cần sử dụng task properties của GULP nhằm định nghĩa những task không giống nhau. Nhưng từ version 4, bọn họ sẽ dùng gần như function nhằm thể hiện các task như: gửi SCSS thành CSS, gửi ES6+ thành ES5…

Có hai các loại task: đặt theo tên cùng default, hai một số loại này chỉ khác biệt ở bí quyết set properties làm việc Exports object.

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

*

Đối với loại default:

*

Khi chạy, ta sẽ sở hữu được 2 tác dụng khác nhau như bên dưới đây. Các loại default sẽ không còn cần thêm tên, tuy thế loại có tên thì rất cần được gọi tên.

*

b. Chuyển thay đổi và về tối ưu CSS preprocessor

Các website hiện đại chủ yếu hèn dùng các CSS preprocessor như thể SCSS, LESS… nhưng lại trình duyệt bắt buộc hiểu được những nhiều loại này nên cần phải chuyển thành những CSS thông thường.

Chúng ta cần setup thêm một Package để làm việc này: gulp-sass , khi thiết đặt xong hãy config lại tệp tin gulpfile.js.

gulpfile.js

*

Kết đúng thật sau:

*

Để chuyển code CSS trên thành một mẫu duy độc nhất hãy cài đặt thêm gulp-cananao và tiếp nối config lại gulpfile.js.

gulpfile.js

*

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

Ví dụ: một hình ảnh chụp từ năng lượng điện thoại/máy ảnh thì dung lượng có thể từ vài MB cho vài chục MB. Nhưng sau thời điểm gửi bởi Message giỏi Skype thì ảnh chỉ còn vài ba trăm KB, vì chưng những vận dụng này vẫn xóa đi các thông tin không quan trọng trong ảnh.

Tương tự, trong ảnh không chỉ bao gồm hình mà lại còn rất nhiều thông tin không cần thiết khác cho việc hiển thị, bởi vì vậy chúng ta cũng rất có thể optimize phần này sẽ giúp đỡ App nhẹ hơn, load cấp tốc hơn.

Hãy mua thêm gulp-image và chỉnh lại file gulpfile.js như sau:

gulpfile.js

*

Khi chạy lệnh xong, bạn sẽ thấy log như bên dưới đây, vậy là 1 phần kích thước hình ảnh đã được rút ngắn. Mỗi ảnh được buổi tối ưu một chút ít sẽ giúp toàn cục app chạy nhanh và quyến rũ và mềm mại hơn.

Xem thêm: Truyen Thien Than Nho Cua The Gioi Ngam, Thiên Thần Nhỏ Của Tôi

*

Sau khi tối ưu, một số trong những thông tin mặt trong ảnh bị xóa đi cùng như vậy ảnh sẽ khối lượng nhẹ hơn và vẫn hiển thị bình thường.

d. Tối ưu và thay đổi phiên bản file JavaScript

Hai phần thiết yếu trong phần này là tối ưu code và thay đổi JS code trường đoản cú ES6+ thành phiên bản nhỏ hơn.

Khi về tối ưu code, hãy tải thêm gulp-uglify để gửi file JS thành 1 file duy nhất và nối lại thành một dòng.

gulpfile.js

*

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

*

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

*

Sau kia hãy cùng config lại tệp tin gulpfile.js và từ đây hoàn toàn có thể code theo thể ES6+.

*

Sau lúc chạy ta đã thu được kết quả ví dụ như sau:

*

e. Theo dõi các file có thay đổi

Trong phần này, họ sẽ config nhằm khi thay đổi file và tiến hành lưu thì Gulp chạy lại các file, biến hóa lại thành các định dạng ao ước muốn.

Đầu tiên hãy đổi lại file gulpfile.js thành như sau:

gulpfile.js

*

Ở đây, ta phân tách config những file JS hay CSS thành những phần khác biệt và tiếp đến theo dõi bọn chúng và export như default. Sau thời điểm config ngừng ta vẫn có công dụng như sau:

*

f. Tự động thiết lập lại với Đồng cỗ Trình săn sóc (Browser Sync)

Ở phần này họ sẽ tạo nên một hệ thống ảo cùng mỗi khi chuyển đổi file thì vps này đã load lại một lần. Trong phần này chúng ta cũng học phương pháp tích thích hợp thêm Optimize CSS với Optimize JS nhằm xem kết quả khi triển khai kết hợp.

Hãy biến hóa lại tệp tin gulpfile.js thành như sau:

gulpfile.js

*
*

Như vẫn thấy, vào hàm exports default, bằng cách chạy scripts() với styles() ta sẽ khởi tạo các tệp tin trong thư mục output. Tiếp nối ta chế tác browser để gắn phần ở output đầu ra này vào, tiếp đó cẩn thận file nào biến hóa thì sẽ mang đến chạy lại browser bằng phương pháp cho các tasks: scripts với styles vào watch với đk là tôi đã config reload: true bên trong những task.

Khi config xong bạn sẽ nhận được hiệu quả như sau (ở ví dụ như này chỉ địa chỉ cửa hàng CSS):

*

g. Xửtrong Gulp

Nội dung trong phần này là parallel() và series() , đây là 2 cách để chạy những task tuần tự hoặc tuy vậy song trong Gulp.

series() nghĩa là những task sẽ đuổi theo thứ từ bỏ task a chạy xong, task b được chạy tiếp. Hãy chuyển đổi gulpfile.js và quan ngay cạnh sự chuyển đổi nhé.

gulpfile.js

*

Chạy lệnh xong, các bạn hãy chăm chú phần Starting và Finished sinh sống dưới mẫu Terminal.

Xem thêm: Common Name Là Gì ? Common Name Nghĩa Là Gì

*

parallel() nghĩa là những task sẽ tiến hành chạy song song, không tồn tại thứ trường đoản cú nào với cũng không yêu cầu đợi task trước chạy chấm dứt rồi bắt đầu đến task sau, hãy đổi lại tệp tin gulpfile.js với xem lại sự biến đổi nào.