GULP CHO NGƯỜI MỚI BẮT ĐẦU

15/09/2020 471
T9.Gulp 01 1
CODEWELL

1. Gulp là gì?

GULP là một tool hỗ trợ Front-end, giúp cho việc phát triển Web – App trở nên dễ dàng hơn bằng cách:

  • Tạo ra một server ảo để phát triển app.
  • Tự động reload lại server ảo này mỗi khi thay đổi một file và lưu.
  • Giúp sử dụng Preprocessors CSS như SASS hay LESS.
  • Optimize lại phần CSS, JS thậm chí cả ảnh.

gulp

Vậy nếu tạo app bằng CLI của các 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 đã hỗ trợ 4 chức năng tương tự Gulp). Nhưng nếu không dùng CLI mà tự tạo app thủ công, hay trong dự án không dùng framework mà muốn có cảm giác như framework thì hãy dùng thêm GULP, có thể đây sẽ là trợ thủ đắc lực của bạn đó!

  1. Cài đặt

T9.Gulp 02 1

Yêu cầu đầu tiên và bắt buộc là phải cài NodeJS.

Hãy init một project dự án với câu lệnh npm init -y và sau khi làm vậy, bạn đã có phần khởi tạo là file package.json ban đầu.

package.json

gulp1

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

gulp2

 

 

 

 

Vì không cài GULP ở global nên cần config thêm như sau:

package.json

gulp3

Hãy để ý phần scripts phía trên và test như sau:

gulp4

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

gulpfile.js

gulp5

Sau đó chạy lệnh đã config ta sẽ được kết quả như sau.

gulp6

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

T9.Gulp 03 1

a. Cấu hình task

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

Có hai loại task: đặt theo têndefault, hai loại này chỉ khác nhau ở cách set properties ở Exports object.

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

gulp7

Đối với loại default:

gulp8

Khi chạy, ta sẽ có 2 kết quả khác nhau như dưới đây. Loại default sẽ không cần thêm tên, nhưng loại có tên thì cần phải gọi tên.

gulp9

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

Các website hiện đại chủ yếu dùng các CSS preprocessor như là SCSS, LESS… nhưng trình duyệt không thể hiểu được những loại này nên bắt buộc 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 để làm việc này: gulp-sass , khi cài đặt xong hãy config lại file gulpfile.js.

gulpfile.js

gulp10

Kết quả như sau:

gulp11

Để chuyển code CSS bên trên thành một dòng duy nhất hãy cài thêm gulp-cananao và sau đó config lại gulpfile.js.

gulpfile.js

gulp12

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

Ví dụ: một ảnh chụp từ điện thoại/máy ảnh thì dung lượng có thể từ vài MB đến vài chục MB. Nhưng sau khi gửi bằng Message hay Skype thì ảnh chỉ còn vài trăm KB, vì những ứng dụng này đã xóa đi các thông tin không cần thiết trong ảnh.

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

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

gulpfile.js

gulp13

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

gulp14

Sau khi tối ưu, một số 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à chuyển đổi phiên bản file JavaScript

Hai phần chính trong phần này là Tối ưu code và chuyển đổi JS code từ ES6+ thành phiên bản nhỏ hơn.

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

gulpfile.js

gulp15

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

gulp16

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

gulp16

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

gulp17

Sau khi chạy ta sẽ thu được kết quả ví dụ như sau:

gulp18

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

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

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

gulpfile.js

gulp19

Ở đây, ta chia config các file JS hay CSS thành các phần khác nhau và sau đó theo dõi chúng và export như default. Sau khi config xong ta sẽ có kết quả như sau:

gulp20

f. Tự động tải lại với Đồng bộ Trình duyệt (Browser Sync)

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

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

gulpfile.js

gulp21 gulp22

Như đã thấy, trong hàm exports default, bằng cách chạy scripts() và styles() ta sẽ tạo các file trong folder output. Sau đó ta tạo browser để gắn phần ở output này vào, tiếp đó xem  xét file nào thay đổi thì sẽ cho chạy lại browser bằng cách cho các tasks: scripts và styles vào watch với điều kiện là mình đã config reload: true bên trong mỗi task.

Khi config xong bạn sẽ nhận được kết quả như sau (ở ví dụ này chỉ add CSS):

gulp23

g. Xửtrong Gulp

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

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

gulpfile.js

gulp23

Chạy lệnh xong, bạn hãy chú ý phần Starting và Finished ở dưới dòng Terminal.

gulp24

parallel() nghĩa là các task sẽ được chạy song song, không có thứ tự nào và cũng không cần đợi task trước chạy xong rồi mới đến task sau, hãy đổi lại file gulpfile.js và xem lại sự thay đổi nào.

gulpfile.js

gulp25

gulp26

Và như vậy, các task của chúng ta đã chạy song song.

h. dụ mẫu

Dưới đây là một file config hoàn chỉnh mà tác giả đã làm.

gulpfile.js

gulp27 gulp28 gulp29 gulp30

 

Nguyễn Xuân Sơn – CO-WELL ASIA