1. Giới thiệu chung
Grunt là 1 công cụ mẫu lệnh dựa trên các task dùng để làm cung ứng những project javascript.quý khách đang xem: Nghĩa của trường đoản cú grunt
Grunt được thực hiện trong vô số nhiều cửa hàng, dự án công trình nlỗi Twitter, Adobe, jQuery
Chúng ta hoàn toàn có thể coi Grunt là một trong những nguyên lý để build code cũng giống như tự động những task lặp đi lặp lại (task runner). Công Việc của task runner hoàn toàn có thể kể đến nhỏng nén, biên dịch các file css, javascript, chạy unit chạy thử.
Bạn đang xem: Grunt
Tại sao yêu cầu áp dụng grunt Hệ sinh thái Grunt rất to lớn với phong phú và đa dạng Số lượng plugin to, cung cấp giỏi việc chạy tự động hóa những task2.Cài đặt grunt
Để thiết lập grunt trước hết họ cần cài đặt nodejs. Hướng dẫn thiết đặt node.js cóp thể tham khảo trên đây. Sau khi thiết lập kết thúc nodejs câu hỏi tiếp sau là thiết lập grunt trên terminal.
npm install grunt-cli -gTiếp sẽ là khởi tạo thành dự án
npm initSau lệnh này file package.json được tạo thành nhằm lưu giữ biết tin của dự án và những tlỗi viện phụ thuộc vào.
Dưới đó là 1 tệp tin package.json nghỉ ngơi dạng siêu đơn giản
, "author": "demo author", "license": "ISC" }Trên thực tiễn sau khi thiết lập những thư viện, package tương quan, từ khóa, các ràng buộc phụ thuộc về các phiên phiên bản tlỗi viện được sử dụng 1 tệp tin package.json hoàn hảo đang trông như thế này
, "scripts": , "main": "lib/grunt", "keywords": , "dependencies": , "devDependencies": , "files": }Sau lúc cấu hình dứt họ bắt buộc chạy lệnh
npm installđể cài đặt những plugin với module cần thiết đến dự án
3. Cấu hình grunt
Grunt thực hiện Grunttệp tin.js (thuộc tlỗi mục với package.json) để gọi các lên tiếng thông số kỹ thuật cho các task runner.
module.exports = function (grunt) , files: } }, uglify: , "ng-app-min": } }, ngAnnotate: , app1: } } }); // Register the default tasks. grunt.registerTask("default", ); };Phần require("matchdep") có trọng trách load tổng thể các module được knhị báo vào tệp tin package.json. Nếu không tồn tại phần này, bọn họ cần phải load những module một cách bằng tay thủ công hơn bằng cách sử dụng
grunt.loadNpmTasks(Module name)Trong ví dụ bên trên hoàn toàn có thể thấy gồm có task sau được định nghĩa
CSSmin: build với minify những tệp tin css Uglify: build với minify các tệp tin js ngAnnotate: thêm xóa các kí pháp của AngularTrong phần khái niệm những task, những file resource nguồn vào cũng như tệp tin Áp sạc ra sau quy trình chạy task sẽ được chứng minh, Ngoài ra bao gồm thêm 1 số tùy chọn khác (ví như có tiến hành nén tệp tin hay không)
Ở phía cuối file có mang cường độ ưu tiên, đồ vật từ bỏ tiến hành những task tại
grunt.registerTask("default", );Các task runner sẽ được thực hiện theo như đúng máy trường đoản cú được khai báo tại đây khiến cho ra hiệu quả ở đầu cuối.
Xem thêm: Tải Game Mèo Tom Christmas Greeting, Tải Game Mèo Tom
4. Grunt vs Gulp
Giống như grunt, gulp cũng là một trong pháp luật nhằm hỗ trợ Việc tự động hóa hóa những task cùng cũng đang được thực hiện tương đối nhiều. Vậy điểm biệt lập thân grunt cùng gulp là gì
4.1 Cộng đồng cách tân và phát triển, người tiêu dùngGrunt được cải cách và phát triển trường đoản cú sớm hơn và đã có được số người tiêu dùng nhiều hơn thế nữa. Số lượt sở hữu về của Grunt là nhiều hơn thế nữa hẳn.
Cũng vì được cải cách và phát triển từ bỏ mau chóng buộc phải grunt cung cấp các plugin hơn (4000 so với 1200 của gulp).
4.2 Tốc độGrunt sử dụng những tệp tin trung gian trong thời điểm tạm thời trong quá trình biên dịch các file css và js trong những khi Gulp up load các thao tác đó vào bộ lưu trữ. Do kia Gulp bổ ích ráng hơn nhiều trong cuộc đua vầ vận tốc.
4.3 Cấu hìnhGulp là 1 ví dụ xuất sắc về "code over configuration", bài toán thông số kỹ thuật vào gulp đơn giản và dễ dàng rộng, dễ đọc, dễ debug rộng, cùng tệp tin thông số kỹ thuật nthêm gọn hơn.
tóm lạiNếu mong áp dụng được rất nhiều plugin rộng được cung cấp tốt rộng bạn nên cần sử dụng grunt còn giả dụ dự án công trình phải ưu tiên tốc độ xử lí rộng cùng không tận hưởng không ít những thư viện tinh vi nên chọn gulp