1. Gulp là gì?

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

Tạo ra một hệ thống ảo để cải tiến và phát triển app.Tự động reload lại server ảo này mỗi khi chuyển đổi một file và lưu.Giúp thực hiện Preprocessors CSS như SASS tuyệt LESS.Optimize lại phần CSS, JS thậm chí cả ảnh.

Bạn đang xem: Giới thiệu về gulp js

*

Vậy ví như tạo tiện ích bằng CLI của những framework như Angular-cli, Vue-cli… thì có phải dùng GULP không?

Câu trả lời là nếu dùng lệnh CLI thì không cần config Gulp (do đã cung ứng 4 công dụng tương từ Gulp). Nhưng nếu không dùng CLI cơ mà tự tạo app thủ công, xuất xắc trong dự án công trình không sử dụng framework mà ý muốn có cảm giác như framework thì nên dùng thêm GULP, rất có thể đây đã là trợ thủ đắc lực của doanh nghiệp đó!

tải đặt

Yêu cầu đầu tiên và cần là cần 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 tạo ra là file package.json ban đầu.

package.json

*

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

*

Vì không download GULP làm việc global nên phải config thêm như sau:

package.json

*

Hãy xem xét phần scripts phía trên và kiểm tra như sau:

*

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

gulpfile.js

*

Sau đó chạy lệnh đang config ta sẽ được công dụng như sau.

*

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

a. Cấu hình task

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

Có hai các loại task: đặt theo têndefault, hai các loại này chỉ khác biệt ở giải pháp set properties sinh sống Exports object.

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

*

Đối với các loại default:

*

Khi chạy, ta sẽ có 2 hiệu quả khác nhau như dưới đây. Một số loại default sẽ không còn cần thêm tên, mà lại loại có tên thì cần được gọi tên.

*

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

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

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

gulpfile.js

*

Kết đúng như sau:

*

Để chuyển code CSS bên trên thành một loại duy tốt nhất hãy thiết lập thêm gulp-cananao và sau đó 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 hình ảnh thì dung lượng hoàn toàn có thể từ vài MB đến vài chục MB. Nhưng sau khi gửi bởi Message tuyệt Skype thì hình ảnh chỉ còn vài ba trăm KB, vày những áp 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ỉ gồm hình nhưng còn tương đối nhiều thông tin không quan trọng khác cho việc hiển thị, do vậy họ cũng rất có thể optimize phần này sẽ giúp đỡ App dịu hơn, load cấp tốc hơn.

Hãy cài đặt thêm gulp-image và chỉnh lại tệp tin gulpfile.js như sau:

gulpfile.js

*

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

*

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

d. Tối ưu và biến hóa phiên bạn dạng file JavaScript

Hai phần thiết yếu trong phần này là buổi tối ưu code và biến hóa JS code từ ES6+ thành phiên bản nhỏ hơn.

Khi tối ưu code, hãy tải thêm gulp-uglify để đưa file JS thành 1 tệp tin 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 gửi code ES6+ về phiên bản cũ hơn, bạn phải cài thêm một số trong những plugin.

*

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

*

Sau lúc chạy ta đang thu được công dụng ví dụ như sau:

*

e. Theo dõi những file bao gồm thay đổi

Trong phần này, họ sẽ config để khi biến đổi file và thực hiện lưu thì Gulp chạy lại các file, thay đổi lại thành các định dạng ý muốn muốn.

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

gulpfile.js

*

Ở đây, ta chia config các file JS tốt CSS thành các phần khác biệt và sau đó theo dõi chúng và export như default. Sau thời điểm config dứt ta sẽ có tác dụng như sau:

*

f. Tự động sở hữu lại với Đồng cỗ Trình chu đáo (Browser Sync)

Ở phần này chúng ta sẽ chế tạo một server ảo cùng mỗi khi chuyển đổi file thì vps này sẽ load lại một lần. Vào phần này chúng ta cũng học biện pháp tích hợp thêm Optimize CSS với Optimize JS để xem công dụng khi thực hiện kết hợp.

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

gulpfile.js

*
*

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

Khi config xong bạn sẽ nhận được công dụng như sau (ở lấy ví dụ này chỉ địa chỉ CSS):

*

g. Xửtrong Gulp

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

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

gulpfile.js

*

Chạy lệnh xong, chúng ta hãy chú ý phần Starting cùng Finished ngơi nghỉ dưới cái Terminal.

Xem thêm: Công Thức Tính Nửa Chu Vi Hình Chữ Nhật Là Gì, Cách Tính Nửa Chu Vi Hình Chữ Nhật

*

parallel() nghĩa là các task sẽ tiến hành chạy tuy vậy song, không tồn tại thứ từ bỏ nào với cũng không bắt buộc đợi task trước chạy ngừng rồi new đến task sau, hãy thay đổi lại file gulpfile.js cùng xem lại sự đổi khác nào.