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

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.

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 đó!

2. Cài đặt

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

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

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

package.json

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

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

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

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

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ên và default, hai loại này chỉ khác nhau ở cách set properties ở Exports object.

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

Đối với loại default:

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.

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

Kết quả như sau:

Để 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

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

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.

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

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

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.

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

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

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

Ở đâ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:

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

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):

g. Xử lý 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

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

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

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

h. Ví dụ mẫu

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

gulpfile.js

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