1. Giới thiệu chung

Grunt là một trong khí cụ mẫu lệnh dựa vào những task dùng để làm hỗ trợ những project javascript.

Bạn đang xem: Nghĩa của từ grunt

Grunt được áp dụng trong nhiều cửa hàng, dự án công trình nhỏng Twitter, Adobe, jQuery

Chúng ta hoàn toàn có thể coi Grunt là 1 trong luật để build code cũng tương tự tự động những task lặp đi tái diễn (task runner). Công bài toán của task runner hoàn toàn có thể nói tới như nén, biên dịch các file css, javascript, chạy unit demo.

Tại sao cần áp dụng gruntHệ sinh thái xanh Grunt rất cao và phong phúSố lượng plugin to, hỗ trợ giỏi vấn đề chạy tự động những task

2.Cài đặt grunt

Để thiết lập grunt trước tiên chúng ta cần setup nodejs.Hướng dẫn thiết lập node.js cóp thể xem thêm tại đây.Sau khi cài đặt ngừng nodejs Việc tiếp theo là cài đặt grunt trên terminal.

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

npm initSau lệnh này tệp tin package.json được tạo ra để lưu đọc tin của dự án và những thư viện dựa vào.

Dưới đấy là 1 file package.json sống dạng rất solo giản

"name": "grunt", "version": "1.0.0", "description": "test grunt", "main": "index.js", "scripts": "test": "eđến "Error: no demo specified" &và exit 1" , "author": "test author", "license": "ISC"Trên thực tế sau khoản thời gian thiết đặt những thư viện, package tương quan, keyword, các ràng buộc phụ thuộc vào về những phiên bản tlỗi viện được áp dụng 1 file package.json hoàn chỉnh 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 Khi cấu hình xong bọn họ yêu cầu chạy lệnh

npm installđể cài đặt các plugin với module quan trọng mang đến dự án

*

3. Cấu hình grunt

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

Trong file Gruntfile.js này bọn họ sẽ có mang quá trình của các task runner (ví như minify các tệp tin css và js, chạy 1 số ít unit test).

Xem thêm: Bản Mẫu Dịch Sổ Hộ Khẩu Tiếng Anh Là Gì ? Number Of Inhabitants

module.exports = function (grunt) // Load the Grunt plugins. require("matchdep") .filterDev("grunt-*") .forEach(grunt.loadNpmTasks); // Project configuration. grunt.initConfig( pkg: grunt.tệp tin.readJSON("package.json"), cssmin: sitecss: options: banner: "/* LicenseMgr Minified css file */" , 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 default tasks. grunt.registerTask("default", <"ngAnnotate", "uglify", "cssmin">);;Phần require("matchdep") bao gồm trách nhiệm load toàn thể những module được khai báo vào file package.json. Nếu không tồn tại phần này, chúng ta cần được load các module 1 cách thủ công bằng tay rộng bằng cách sử dụng

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

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

Trong phần tư tưởng các task, những file resource nguồn vào tương tự như file đầu ra sau quy trình chạy task sẽ tiến hành chứng minh, bên cạnh đó gồm thêm một số tùy chọn không giống (ví dụ như gồm thực hiện nén tệp tin tuyệt không)

Ở phía cuối file tư tưởng cường độ ưu tiên, lắp thêm 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 knhị báo trên đây làm cho ra hiệu quả sau cùng.

4. Grunt vs Gulp

Giống nlỗi grunt, gulp cũng là 1 trong những điều khoản để cung ứng vấn đề auto hóa những task với cũng đang rất được sử dụng không ít. Vậy điểm khác biệt giữa grunt và gulp là gì

4.1 Cộng đồng trở nên tân tiến, tín đồ sử dụng

Grunt được cách tân và phát triển từ bỏ mau chóng rộng cùng đã đạt được số người sử dụng nhiều hơn nữa. Số lượt download về của Grunt là nhiều hơn hẳn.

Cũng bởi được cải tiến và phát triển từ mau chóng bắt buộc grunt hỗ trợ các plugin hơn (4000 so với 1200 của gulp).

4.2 Tốc độ

Grunt áp dụng những file trung gian trong thời điểm tạm thời trong quy trình biên dịch các file css và js trong những lúc Gulp xử lí các thao tác làm việc đó vào bộ nhớ lưu trữ. Do đó Gulp có lợi núm hơn hẳn vào cuộc đua vầ vận tốc.

Với những dự án công trình qui tế bào nhỏ tuổi, sự khác biệt về tốc độ là không đáng kể tuy nhiên so với những dự án công trình Khủng thì sử dụng gulp mang về sự khác hoàn toàn đáng chú ý về tính năng.

4.3 Cấu hình

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

Kết luận

Nếu mong mỏi thực hiện được rất nhiều plugin hơn được hỗ trợ tốt hơn bạn nên cần sử dụng grunt còn giả dụ dự án bắt buộc ưu tiên vận tốc cập nhật rộng và ko đề nghị không ít các tlỗi viện phức tạp nên chọn gulp

Bài viết liên quan

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *