Gulp - Khái niệm cơ bản

Trong chương này, bạn sẽ làm quen với một số điều cơ bản liên quan đến Gulp.

Hệ thống xây dựng là gì?

Hệ thống xây dựng được gọi là tập hợp các nhiệm vụ (được gọi chung là task runners), tự động hóa công việc lặp đi lặp lại.

Sau đây là danh sách một số tác vụ có thể được xử lý bằng cách sử dụng hệ thống xây dựng -

Biên dịch CSS và JavaScript tiền xử lý.
Giảm thiểu các tệp để giảm kích thước của nó.
Kết nối các tệp thành một.
Kích hoạt máy chủ để tự động tải lại.
Tạo các bản dựng triển khai để lưu trữ các tệp kết quả ở một vị trí.

Trong quy trình làm việc front-end hiện đại, hệ thống xây dựng hoạt động với 3 thành phần:

Người quản lý gói
Preprocessors
Người chạy nhiệm vụ và xây dựng công cụ

Người quản lý gói

Nó được sử dụng để tự động hóa việc nâng cấp cài đặt, loại bỏ các phụ thuộc bắt buộc, các thư viện sạch và các gói được sử dụng trong môi trường phát triển. Ví dụ cho người quản lý gói làbower và npm.

Tiền xử lý

Bộ tiền xử lý rất hữu ích cho một quy trình làm việc hiện đại hiệu quả bằng cách thêm cú pháp được tối ưu hóa và các tính năng bổ sung biên dịch sang ngôn ngữ mẹ đẻ của nó.

Một số bộ tiền xử lý phổ biến là -

CSS - SASS, LESS và bút cảm ứng.
JS - CoffeeScript, LiveScript, TypeScript, v.v.
HTML - Markdown, HAML, Slim, Jade, v.v.

Task Runners

Trình chạy tác vụ tự động hóa các tác vụ như chuyển đổi SASS sang CSS, thu nhỏ tệp, tối ưu hóa hình ảnh và nhiều tác vụ khác được sử dụng trong quy trình phát triển. Gulp là một trong những task runner trong môi trường làm việc front-end hiện đại và nó chạy trên Node.

Thiết lập dự án của bạn

Để thiết lập dự án của bạn trong máy tính, hãy tạo một thư mục có tên là “công việc” chẳng hạn. Thư mục công việc chứa các thư mục con và tệp sau:

Src - Vị trí của các tệp và thư mục nguồn HTML đã được xử lý trước.
- Images - Chứa hình ảnh không nén.
- Scripts - Chứa nhiều tệp kịch bản được xử lý trước.
- Styles - Chứa nhiều tệp CSS được xử lý trước.
Build - Thư mục này sẽ được tạo tự động chứa các tệp sản xuất.
- Images - Chứa hình ảnh nén.
- Scripts - Tệp tập lệnh đơn chứa các mã được rút gọn.
- Styles - Tệp CSS đơn chứa các mã được rút gọn.
gulpfile.js - Đây là tệp cấu hình, được sử dụng để xác định các tác vụ của chúng ta.