GRUNT LÀ GÌ?

  -  

1. Giới thiệu chung

Grunt là 1 quy định cái lệnh dựa trên những task dùng làm cung cấp 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 như Twitter, Adobe, jQuery

Chúng ta có thể coi Grunt là 1 trong lao lý để build code tương tự như tự động những task lặp đi lặp lại (task runner). Công câu hỏi của task runner có thể nói đến nhỏng nén, biên dịch những file css, javascript, chạy unit kiểm tra.

Tại sao nên sử dụng gruntHệ sinh thái xanh Grunt rất to lớn và phong phúSố lượng plugin mập, cung ứng tốt câu hỏi chạy auto các task

2.Cài đặt grunt

Để thiết đặt grunt trước nhất chúng ta buộc phải cài đặt nodejs.Hướng dẫn thiết đặt node.js cóp thể tìm hiểu thêm trên đây.Sau Khi thiết đặt hoàn thành nodejs câu hỏi tiếp theo sau là setup grunt trên terminal.

npm install grunt-cli -gTiếp đó là khởi sản xuất dự án

npm initSau lệnh này file package.json được tạo thành để lưu lại báo cáo của dự án cùng các tlỗi viện nhờ vào.

Dưới đấy là 1 file package.json sinh sống dạng vô cùng 1-1 giản

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

"name": "grunt", "description": "demo grunt", "version": "1.0.0", "author": "demo 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 cấu hình kết thúc họ đề xuất chạy lệnh

npm installnhằm thiết lập những plugin cùng module cần thiết cho dự án

*

3. Cấu hình grunt

Grunt thực hiện Grunttệp tin.js (cùng thỏng mục cùng với package.json) để gọi các biết tin cấu hình cho các task runner.

Trong tệp tin Grunttệp tin.js này bọn họ sẽ quan niệm công việc của các task runner (ví dụ như minify những tệp tin css và js, chạy 1 số unit test).

Xem thêm: Tạo Hình Nền Điện Thoại Galaxy Theo Tên Đẹp Full Hd, 100+ Hình Nền Điện Thoại Theo Tên Mình

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 tệp tin */" , files: "client/public/css/site.min.css": < "client/public/stylesheets/app.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/tiện ích.js", "client/scripts/home/services.js", "client/scripts/home/controllers.js", "client/scripts/home/filters.js", "client/scripts/home/directives.js" > ); // Register the mặc định tasks. grunt.registerTask("default", <"ngAnnotate", "uglify", "cssmin">);;Phần require("matchdep") bao gồm nhiệm vụ load toàn cục các module được knhị báo vào file package.json. Nếu không tồn tại phần này, bọn họ rất cần được load các module 1 cách bằng tay hơn bằng cách sử dụng

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

CSSmin: build với minify các tệp tin cssUglify: build với minify những tệp tin 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 đầu vào cũng tương tự tệp tin Áp sạc ra sau quá trình chạy task sẽ tiến hành chứng thực, ngoài ra có thêm một số tùy chọn khác (ví dụ như gồm triển khai nén tệp tin tuyệt không)

Ở phía cuối tệp tin khái niệm cường độ ưu tiên, vật dụng từ tiến hành các task tại

grunt.registerTask("default", <"ngAnnotate", "uglify", "cssmin">);Các task runner sẽ được tiến hành theo như đúng máy từ được khai báo tại trên đây để cho ra tác dụng sau cuối.

4. Grunt vs Gulp

Giống như grunt, gulp cũng là 1 khí cụ để cung ứng việc tự động hóa hóa những task với cũng đang rất được áp dụng không hề ít. Vậy điểm biệt lập giữa grunt cùng gulp là gì

4.1 Cộng đồng cải tiến và phát triển, bạn sử dụng

Grunt được phát triển từ bỏ mau chóng hơn với giành được số người sử dụng nhiều hơn nữa. Số lượt cài đặt về của Grunt là nhiều hơn nữa hẳn.

Cũng do được phát triển từ bỏ nhanh chóng đề xuất grunt hỗ trợ những plugin rộng (4000 đối với 1200 của gulp).

4.2 Tốc độ

Grunt áp 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 tệp tin css với js trong lúc Gulp xử lí các thao tác kia trong bộ nhớ lưu trữ. Do đó Gulp hữu ích núm hơn nhiều trong cuộc đua vầ tốc độ.

Với những dự án công trình qui tế bào nhỏ dại, sự khác hoàn toàn về tốc độ là ko đáng kể tuy vậy đối với các dự án công trình béo thì thực hiện gulp đem về sự khác biệt đáng kể về hiệu năng.

Xem thêm: Truyện Duyên Âm Có Thật Duyên Âm, Truyện Ngắn

4.3 Cấu hình

Gulp là 1 ví dụ xuất sắc về "code over configuration", bài toán thông số kỹ thuật trong gulp dễ dàng và đơn giản hơn, dễ đọc, dễ dàng debug hơn, và tệp tin cấu hình nthêm gọn gàng rộng.

Kết luận

Nếu ao ước sử dụng được nhiều plugin rộng được hỗ trợ xuất sắc hơn bạn nên cần sử dụng grunt còn ví như dự án nên ưu tiên tốc độ up load hơn cùng không tận hưởng vô số những thỏng viện phức tạp hãy lựa chọn gulp