Share vì hữu ích

GulpJS là công cụ quản lý tác vụ bằng Javascript giúp bạn tự động hoá một số quá trình khi dev. Vậy bạn có biết cách sử dụng GulpJS chưa? Bài viết này sẽ hướng dẫn chi tiết để bạn làm quen với nó.

GulpJS là gì?

Như đã nói, đây là một công cụ được viết trên nền Javascript và thương làm việc trong môi trường NodeJS. Nó có thể làm khá nhiều thao tác tự động, chẳng hạn như nén Javascript và CSS file, tự động làm mới trình duyệt khi có file được sửa, tối ưu và chuyển đổi các CSS preprocessor như SASS/SCSS hay Less, nén ảnh,… GulpJS chính là lời giải cho những công việc có tính chất lặp đi lặp trong quá trình dev project.

Mô hình của Gulp
Mô hình của Gulp

GulpJS là công cụ build giúp bạn thoát khỏi mớ việc quen thuộc. Một khi bạn đã cài đặt xong GulpJS, nó tự động hoá và giúp bạn tập trung vào code mà thôi.

Cài đặt GulpJS

 

 

Kết luận

Nếu bạn làm theo từng hướng dẫn của bài viết này, mình tin là các bạn có thể biết được cách sử dụng GulpJS rồi. Đừng quên dành nhiều thời gian để tìm hiểu và sử dụng được nhiều hơn nữa các plugin của GulpJS để giúp project của bạn sử dụng nhanh, gọn và có code standard chuẩn hơn nhé.

Trong thời gian tiếp theo, Code Tốt sẽ giới thiệu cách sử dụng webpack – công cụ tương tự Gulp nhưng đang phổ biến nhất hiện nay.

Share vì hữu ích

Tác giả: Khôi 'Pro' Nguyễn

Technical Lead tại Solis Lab. Quản lý ngôn ngữ tại vi.wordpress.org.

2 Trả lời “Toàn tập về GulpJS

  1. Anh Khôi
    Một project có thể có rất nhiều thư viện css,js mình phải dùng.

    Có nên nén nó hết vào 1 file khi đưa ra production không? ví dụ: style.min.css hoặc script.min.js (các thư viện đã đc nén hết vào).

    Nếu ko nên nén thì em lại import nó vào theo cách bình thường ? Vậy có lợi ích gì nhanh hơn?

    1. Theo mình thì nên nén nếu mình chạy ra điểm cuối là production. Còn nếu chưa chắc chắn về mức độ cần thiết của lib thì cứ tách riêng ra 1 file riêng. Ví dụ như trong WordPress development thì mình thường để 2 file là main.min.css và editor.min.css (editor dùng cho soạn thảo trong backend nhập sẽ giống style frontend).

Trả lời