TÌM HIỂU VỀ GRUNT

1. Giới thiệu chung

Grunt là một phương tiện chiếc lệnh dựa vào các task dùng để làm cung cấp những project javascript.

Bạn đang xem: Tìm hiểu về grunt

Grunt được thực hiện trong vô số đơn vị, 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 nguyên lý để build code cũng tương tự auto những task lặp đi lặp lại (task runner). Công câu hỏi của task runner rất có thể nói đến như nén, biên dịch những file css, javascript, chạy unit demo.

Tại sao buộc phải sử dụng gruntHệ sinh thái Grunt không hề nhỏ và phong phúSố lượng plugin phệ, cung ứng giỏi câu hỏi chạy auto những task

2.Cài đặt grunt

Để setup grunt thứ 1 họ nên cài đặt nodejs.Hướng dẫn setup node.js cóp thể tham khảo trên đây.Sau lúc setup xong nodejs vấn đề tiếp theo sau là cài đặt grunt bên trên terminal.

npm install grunt-cli -gTiếp chính là khởi chế tạo ra dự án

npm initSau lệnh này tệp tin package.json được tạo nên để lưu giữ đọc tin của dự án công trình cùng những thỏng viện phụ thuộc vào.

Dưới đó là 1 tệp tin package.json ở dạng rất đối chọi giản

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

"name": "grunt", "description": "thử nghiệm grunt", "version": "1.0.0", "author": "thử nghiệm 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 dứt bọn họ yêu cầu chạy lệnh

npm installđể thiết lập các plugin với module cần thiết mang lại dự án

*

3. Cấu hình grunt

Grunt sử dụng Grunttệp tin.js (thuộc tlỗi mục cùng với package.json) để gọi các công bố thông số kỹ thuật cho các task runner.

Trong tệp tin Gruntfile.js này họ đã tư tưởng quá trình của những task runner (ví như minify những file css với js, chạy 1 số unit test).

Xem thêm: Rebuttal Là Gì - See More Of Rvp

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 tệp tin */" , 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/phầm mềm.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") tất cả trách nhiệm load toàn thể những module được knhì báo trong file package.json. Nếu không có 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 rất có thể thấy gồm có task sau được định nghĩa

CSSmin: build cùng minify các file cssUglify: build cùng minify các tệp tin jsngAnnotate: thêm xóa các kí pháp của Angular

Trong phần khái niệm những task, những file resource đầu vào cũng như file cổng đầu ra sau quy trình chạy task sẽ được chứng tỏ, mà hơn nữa gồm thêm 1 số tùy chọn khác (ví dụ như gồm triển khai nén file giỏi không)

Tại phía cuối file khái niệm mức độ ưu tiên, thiết bị tự triển khai các task tại

grunt.registerTask("default", <"ngAnnotate", "uglify", "cssmin">);Các task runner sẽ được thực hiện theo đúng thiết bị tự được knhì báo tại đây khiến cho ra kết quả ở đầu cuối.

4. Grunt vs Gulp

Giống như grunt, gulp cũng là một lý lẽ để cung cấp việc tự động hóa những task với cũng đang rất được sử dụng khá nhiều. Vậy điểm biệt lập thân grunt và gulp là gì

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

Grunt được phát triển trường đoản cú mau chóng hơn với đã đạt được số người tiêu dùng nhiều hơn thế nữa. Số lượt mua về của Grunt là nhiều hơn nữa hẳn.

Cũng vày được cải cách và phát triển tự sớm bắt buộc grunt hỗ trợ những plugin hơn (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 quy trình biên dịch những file css và js trong lúc Gulp xử lý những thao tác kia vào bộ nhớ lưu trữ. Do đó Gulp hữu ích nạm 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 nhỏ tuổi, sự biệt lập về tốc độ là ko đáng kể nhưng lại đối với các dự án công trình to thì thực hiện gulp đem đến sự biệt lập đáng chú ý về tính năng.

4.3 Cấu hình

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

Kết luận

Nếu mong muốn áp dụng được rất nhiều plugin rộng được hỗ trợ xuất sắc rộng chúng ta nên dùng grunt còn trường hợp dự án nên ưu tiên vận tốc xử lí rộng và ko trải nghiệm quá nhiều các tlỗi viện tinh vi hãy chọn gulp