NộI Dung
Các trình chạy tác vụ JavaScript như Grunt đã trở nên cực kỳ phổ biến với các nhà phát triển front-end. Điều này là do chúng giúp làm một việc mà tất cả chúng ta đều muốn làm trong công việc của mình - tiết kiệm thời gian!
Nhưng với hơn 5.000 (và đang tiếp tục tăng) plugin Grunt hiện có sẵn, các nhà phát triển có thể khó tìm thấy những 'viên kim cương thô' đó. Chúng tôi đã nhìn lại quãng thời gian bị mắc kẹt với Grunt để tìm ra công thức hoàn hảo của các plugin Grunt mà bạn nên sử dụng.
01. Uglify
Mọi nhà phát triển front-end đáng giá muối của họ đều biết về lợi thế của việc giảm thiểu các tệp JavaScript và đó chính xác là những gì plugin này thực hiện. Đó là mức độ phổ biến của nó, nó thực sự được đưa vào Hướng dẫn Bắt đầu Grunt. Mặc dù có tên, plugin này cũng có thể được sử dụng để làm đẹp mã JavaScript của bạn - mặc dù điều đó không đặc biệt hữu ích cho việc sử dụng sản xuất.
02. Sass
Có thể có một số cuộc tranh luận về việc bộ xử lý trước CSS nào thực sự cai trị cơ chế này, nhưng ở đây tại Stickyeyes, chúng tôi đã giải quyết vấn đề Sass hơn là đối thủ chính của nó, Less. Trình cắm này cho phép chúng tôi viết các tệp Sass của mình và tự động biên dịch chúng sang CSS. Giá trị của việc sử dụng bộ xử lý trước CSS đảm bảo cho bản thân một bài báo riêng biệt, nhưng có thể an toàn khi nói rằng nếu bạn không sử dụng bộ xử lý trước thì bạn đã rất muộn đến bữa tiệc!
03. CSSMin
Plugin này là CSS tương đương với Uglify. Nó chỉ đơn giản là lấy bất kỳ tệp CSS cụ thể nào và thu nhỏ chúng. Tất nhiên nếu bạn định sử dụng nó cùng với plugin Sass thì bạn cần đảm bảo rằng tác vụ này được chạy sau tác vụ Sass.
Có rất nhiều lựa chọn thay thế cho CSSMin cũng có thể giảm kích thước tệp CSS của bạn bằng cách sử dụng các kỹ thuật hơi khác nhau; CSS nano, CSS vắt, CSS co lại, v.v. Hãy đọc điểm chuẩn hữu ích này nếu bạn yêu thích loại nội dung đó.
04. Concat
Như tên cho thấy, plugin này chỉ cần lấy nhiều tệp và nối chúng thành một. Như với mã rút gọn, nối các tệp cũng là một phương pháp hay nhất lâu đời để giảm thời gian tải trang.
Nối tệp phải luôn được sử dụng trong sản xuất cho cả JavaScript và CSS. Đây thường là tác vụ cuối cùng được chạy - sau tác vụ xử lý trước CSS và tác vụ thu nhỏ. Thật dễ dàng để chỉ cần yêu cầu plugin này nối tất cả các tệp trong một thư mục cụ thể, nhưng hãy lưu ý thứ tự các tệp sẽ được nối - bạn có thể cần đặt một thứ tự cụ thể hoặc đặt tên cho các tệp để chúng luôn được nối theo thứ tự bạn muốn .
05. ImageMin
Tương tự như CSSMin và Uglify, ImageMin giải quyết một vấn đề lâu đời khác đối với tải trang - kích thước tệp hình ảnh. 'Thu nhỏ hình ảnh' thường là bước gọi đầu tiên để tối ưu hóa, vì vậy plugin này rất cần thiết để giảm tổng kích thước tệp trang xuống nhiều nhất có thể.
Nếu bạn đang làm việc với JPG, PNG, GIF hoặc SVG (một định dạng hình ảnh vectơ ngày càng phổ biến), thì plugin này sẽ cung cấp khả năng giảm kích thước tệp của hình ảnh mà bạn không cần phải nhấc ngón tay lên. Nếu bạn có nhiều hình ảnh trong dự án của mình, bạn chỉ nên chạy tác vụ này khi bạn đang thúc đẩy sản xuất, thay vì chạy tác vụ này trên một sự kiện theo dõi (xem điểm tiếp theo).
06. Xem
Plugin này không thực sự ảnh hưởng đến giao diện người dùng trang web của bạn, nhưng nó cực kỳ hữu ích trong việc tạo ra một quy trình Grunt hiệu quả. Watch chỉ cần theo dõi bất kỳ thư mục nào bạn chỉ định và khi có gì đó thay đổi, nó sẽ tự động kích hoạt các tác vụ Grunt nhất định.
Vì vậy, bạn có thể thiết lập một điều kiện xem trên thư mục 'js' để chạy các tác vụ JavaScript và một điều kiện khác trên thư mục 'css' để chạy các tác vụ CSS của bạn. Điều này có nghĩa là bạn sẽ không bao giờ phải chạy quy trình Grunt chính của mình theo cách thủ công! Chỉ cần khởi tạo nhiệm vụ đồng hồ grunt trước khi bạn bắt đầu thực hiện thay đổi và bạn có thể quên nó ngay cả ở đó.
Từ ngữ: Jamie Shields
Jamie Shields là một nhà phát triển phụ tại đại lý tiếp thị kỹ thuật số Stickyeyes.
Như thế này? Đọc này!
- Grunt vs Gulp: Bạn nên chọn công cụ xây dựng JavaScript nào?
- 8 cách để cải thiện thiết lập Grunt của bạn
- Các chủ đề WordPress miễn phí tốt nhất
