Grunt là gì

1. Giới thiệu chung

Grunt là 1 trong những khí cụ dòng lệnh dựa trên các task dùng để cung ứng những project javascript.

Bạn đang xem: Grunt là gì

Grunt được áp dụng trong vô số nhiều chủ thể, dự án công trình nhỏng Twitter, Adobe, jQuery

Chúng ta rất có thể coi Grunt là 1 trong những điều khoản để build code cũng giống như auto những task lặp đi lặp lại (task runner). Công bài toán của task runner có thể kể tới nlỗi nén, biên dịch các file css, javascript, chạy unit test.

Tại sao đề nghị sử dụng gruntHệ sinh thái Grunt không nhỏ cùng phong phúSố lượng plugin béo, hỗ trợ giỏi Việc chạy tự động hóa các task

2.Cài đặt grunt

Để thiết đặt grunt trước tiên họ phải thiết đặt nodejs.Hướng dẫn thiết lập node.js cóp thể tham khảo tại trên đây.Sau Lúc thiết đặt hoàn thành nodejs bài toán tiếp theo 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 tệp tin package.json được tạo nên để lưu lại công bố của dự án và những thỏng viện nhờ vào.

Dưới đây là 1 tệp tin package.json ở dạng cực kỳ đối kháng giản

"name": "grunt", "version": "1.0.0", "description": "test grunt", "main": "index.js", "scripts": "test": "eđến "Error: no test specified" &và exit 1" , "author": "chạy thử author", "license": "ISC"Trên thực tiễn sau thời điểm thiết đặt các thư viện, package tương quan, từ khoá, những ràng buộc dựa vào về các phiên bạn dạng thỏng viện được sử dụng 1 tệp tin package.json hoàn hảo vẫn trông như vậy này

"name": "grunt", "description": "test grunt", "version": "1.0.0", "author": "kiểm tra author", "repository": "gruntjs/grunt", "engines": "node": ">=0.8.0" , "scripts": "test": "grunt test", "test-tap": "grunt test:tap" , "main": "lib/grunt", "keywords": < "task", "async", "cli", "minify", "uglify", "build", "lodash", "unit", "test", "qunit", "nodeunit", "make", "jake", "tool" >, "dependencies": "async": "~0.1.22", "coffee-script": "~1.3.3", "colors": "~0.6.2", "dateformat": "1.0.2-1.2.3", "eventemitter2": "~0.4.13", "exit": "~0.1.1", "findup-sync": "~0.1.2", "getobject": "~0.1.0", "hooker": "~0.2.3", "nopt": "~1.0.10", "rimraf": "~2.2.8", "underscore.string": "~2.2.1", "which": "~1.0.5" , "devDependencies": "difflet": "~0.2.3", "grunt-contrib-jshint": "~0.6.4", "grunt-contrib-nodeunit": "~0.4.1", "grunt-contrib-watch": "~0.5.3", "grunt-jscs": "~1.5.0", "semver": "2.1.0", "shelljs": "~0.2.5", "temporary": "~0.0.4" , "files": < "lib" >Sau lúc thông số kỹ thuật xong xuôi chúng ta nên chạy lệnh

npm installđể setup các plugin cùng module quan trọng mang lại dự án

*

3. Cấu hình grunt

Grunt áp dụng Gruntfile.js (cùng tlỗi mục cùng với package.json) để đọc các thông tin cấu hình cho những task runner.

Trong file Grunttệp tin.js này họ sẽ quan niệm quá trình của những task runner (ví như minify các file css và js, chạy một số ít unit test).

Xem thêm: Bộ Bàn Ghế Gỗ Hương,Bo Ban Ghe Phong Khach Gia Re,Bộ Bàn Ghế Phòng Khách Giá Rẻ

module.exports = function (grunt) // Load the Grunt plugins. require("matchdep") .filterDev("grunt-*") .forEach(grunt.loadNpmTasks); // Project configuration. grunt.initConfig( pkg: grunt.file.readJSON("package.json"), cssmin: sitecss: options: banner: "/* LicenseMgr Minified css file */" , files: "client/public/css/site.min.css": < "client/public/stylesheets/tiện ích.css", "client/public/stylesheets/appgrid.css", "client/public/stylesheets/carousel.css", "client/public/stylesheets/forms.css" > , uglify: options: report: "min", compress: true, mangle: true , "ng-app-min": files: "client/public/js/ng/site.min.js": < "client/scripts/home/site.js", "client/scripts/home/one.js" >, "client/public/js/ng/licensemgr.min.js": < "client/scripts/models/routingConfig.js", "client/scripts/licensemgr/one.js" > , ngAnnotate: options: singleQuotes: true , app1: files: "client/scripts/home/one.js": < "client/scripts/home/app.js", "client/scripts/home/services.js", "client/scripts/home/controllers.js", "client/scripts/home/filters.js", "client/scripts/home/directives.js" > ); // Register the default tasks. grunt.registerTask("default", <"ngAnnotate", "uglify", "cssmin">);;Phần require("matchdep") có trách nhiệm load tổng thể các module được khai báo trong file package.json. Nếu không tồn tại phần này, họ cần được load các module 1 cách bằng tay hơn bằng phương pháp sử dụng

grunt.loadNpmTasks(Module name)Trong ví dụ trên có thể thấy bao hàm task sau được định nghĩa

CSSmin: build và minify những file cssUglify: build với minify những file jsngAnnotate: thêm xóa những kí pháp của Angular

Trong phần quan niệm các task, những file resource nguồn vào cũng tương tự file cổng đầu ra sau quy trình chạy task sẽ được chỉ rõ, bên cạnh đó bao gồm thêm một số tùy lựa chọn khác (ví dụ như có triển khai nén tệp tin tuyệt không)

Ở phía cuối tệp tin có mang mức độ ưu tiên, vật dụng tự tiến hành những task tại

grunt.registerTask("default", <"ngAnnotate", "uglify", "cssmin">);Các task runner sẽ tiến hành tiến hành theo như đúng lắp thêm trường đoản cú được knhì báo trên phía trên làm cho ra kết quả ở đầu cuối.

4. Grunt vs Gulp

Giống như grunt, gulp cũng là một chế độ để cung ứng bài toán auto hóa các task và cũng đang rất được sử dụng tương đối nhiều. Vậy điểm khác hoàn toàn giữa grunt và gulp là gì

4.1 Cộng đồng phát triển, tín đồ sử dụng

Grunt được cải tiến và phát triển trường đoản cú nhanh chóng rộng với đã đạt được số người sử dụng nhiều hơn nữa. Số lượt thiết lập về của Grunt là nhiều hơn hẳn.

Cũng do được phát triển tự nhanh chóng đề xuất grunt cung cấp nhiều plugin rộng (4000 so với 1200 của gulp).

4.2 Tốc độ

Grunt sử dụng những file trung gian trong thời điểm tạm thời trong quá trình biên dịch các file css với js trong khi Gulp cập nhật các thao tác đó trong bộ lưu trữ. Do kia Gulp bổ ích vắt hơn hẳn trong cuộc đua vầ vận tốc.

Với các dự án công trình qui tế bào bé dại, sự biệt lập về vận tốc là không đáng kể dẫu vậy đối với các dự án Khủng thì thực hiện gulp đem đến sự khác hoàn toàn đáng chú ý về tính năng.

Xem thêm: Hướng Dẫn Cách Bỏ Mật Khẩu Trong Excel Phiên Bản 2010, 2013, 2016, 2019

4.3 Cấu hình

Gulp là một ví dụ giỏi về "code over configuration", câu hỏi thông số kỹ thuật vào gulp dễ dàng và đơn giản rộng, đọc dễ dàng, dễ dàng debug hơn, và tệp tin thông số kỹ thuật ngắn thêm gọn gàng hơn.

Kết luận

Nếu ước ao thực hiện được nhiều plugin rộng được cung ứng xuất sắc rộng chúng ta nên sử dụng grunt còn giả dụ dự án công trình nên ưu tiên tốc độ up date hơn và không hưởng thụ vô số các thư viện phức hợp nên chọn lựa gulp


Chuyên mục: Blogs