Cách sử dụng Grunt để tự động hóa quy trình làm việc của bạn [Hướng dẫn]

Tôi là một ủng hộ lớn của tự động hóa bởi vì nó làm cho cuộc sống đơn giản hơn nhiều Tại sao phải dành thời gian cho những nhiệm vụ đơn điệu, đơn điệu, hút hết sinh lực của bạn ngay khi bạn có một máy tính để làm việc cho bạn? Điều này đặc biệt đúng đối với phát triển web.

Nhiều nhiệm vụ phát triển có thể là một việc vặt. Trong khi phát triển, bạn có thể muốn biên dịch mã, khi đẩy phiên bản phát triển, bạn có thể nối và thu nhỏ tệp, xóa tài nguyên chỉ phát triển, v.v. Ngay cả những thứ tương đối không phức tạp như xóa một loạt các tệp hoặc đổi tên thư mục có thể chiếm một phần lớn thời gian của chúng ta.

Trong bài viết này, tôi sẽ chỉ cho bạn cách bạn có thể làm cho cuộc sống của mình dễ dàng hơn bằng cách tận dụng chức năng tuyệt vời được cung cấp bởi Grunt, một người chạy tác vụ Javascript. Tôi sẽ hướng dẫn bạn trong toàn bộ quá trình để không phải lo lắng ngay cả khi bạn không phải là trình hướng dẫn Javascript!

Thêm thông tin trên Hongkiat.com:

• CSSMatic giúp CSS dễ dàng cho các nhà thiết kế web
• Tự động hóa các tác vụ trong Mac với các tác vụ thư mục
• Tự động hóa các tập tin Dropbox của bạn với các hành động
• 10 ứng dụng giúp tự động hóa Nhiệm vụ trên thiết bị Android của bạn
• Cách (tự động) sao lưu trang web của bạn vào Dropbox

Cài đặt Grunt

Cài đặt Grunt khá dễ dàng vì nó sử dụng trình quản lý gói nút. Điều này có nghĩa là bạn cũng có thể phải cài đặt Node. Mở một thiết bị đầu cuối hoặc một dấu nhắc lệnh (từ bây giờ tôi sẽ gọi thiết bị đầu cuối này) và nhập nmp -v.

Nếu bạn thấy số phiên bản bạn có chiều đã cài đặt, nếu bạn thấy lỗi "không tìm thấy lệnh", bạn sẽ phải cài đặt nó bằng cách truy cập trang tải xuống nút và chọn phiên bản bạn cần.

Khi Node được cài đặt, việc nhận Grunt là vấn đề của một lệnh được ban hành trong thiết bị đầu cuối:

cài đặt npm -g grunt-cli

Cách sử dụng cơ bản

Bạn sẽ sử dụng Grunt trên cơ sở dự án vì mỗi dự án sẽ có các yêu cầu khác nhau. Bây giờ chúng ta hãy bắt đầu một dự án bằng cách tạo một thư mục và điều hướng đến nó thông qua thiết bị đầu cuối của chúng tôi.

Hai tập tin tạo nên trái tim của Grunt: pack.json và Gruntfile.js. Tệp gói xác định tất cả các phụ thuộc của bên thứ ba mà tự động hóa của bạn sẽ sử dụng, Gruntfile cho phép bạn kiểm soát làm sao chính xác những thứ này được sử dụng. Bây giờ chúng ta hãy tạo một tệp gói trần với nội dung sau:

"name": "test-project", "phiên bản": "1.0", "devDependencies": "grunt": "~ 0.4.5",

Tên và phiên bản tùy thuộc vào bạn, các phụ thuộc phải chứa tất cả các gói bạn đang sử dụng. Hiện tại chúng tôi không làm gì cả, vì vậy chúng tôi sẽ đảm bảo Grunt được thêm vào như một phần phụ thuộc.

Bạn có thể tự hỏi dòng chữ nguệch ngoạc (~) được gọi là dấu ngã đang làm gì ở đó.

Các phiên bản có thể được yêu cầu bằng cách sử dụng các quy tắc từ phiên bản ngữ nghĩa cho npm. Tóm lại:

• Bạn chỉ định một phiên bản chính xác như 4.5.2
• Bạn có thể sử dụng lớn hơn / ít hơn để chỉ phiên bản tối thiểu hoặc tối đa, chẳng hạn như > 4.0.3
• Sử dụng dấu ngã chỉ định một khối phiên bản. Sử dụng ~ 1,2 được coi là 1.2.x, bất kỳ phiên bản nào trên 1.2.0 nhưng dưới 1.3

Có rất nhiều cách chỉ định phiên bản có sẵn nhưng điều này là đủ cho hầu hết các nhu cầu. Bước tiếp theo là tạo Gruntfile để thực hiện tự động hóa của chúng tôi.

 module.exports = function (grunt) grunt.initConfig (pkg: grunt.file.readJSON ('pack.json')); grunt.registerTask ('mặc định', []); ; 

Về cơ bản, đây là bộ xương cho Gruntfile; Có hai nơi quan tâm. Một địa điểm là bên trong initConfig () chức năng. Đây là nơi tất cả các cấu hình dự án của bạn đi. Điều này sẽ bao gồm những việc như xử lý biên dịch LESS / SASS, thu nhỏ tập lệnh, v.v..

Vị trí thứ hai nằm dưới chức năng đó nơi bạn chỉ định các tác vụ. Bạn có thể thấy một nhiệm vụ được chỉ định có tên “mặc định”. Hiện tại nó trống rỗng nên không có gì, nhưng chúng tôi sẽ mở rộng về sau. Các nhiệm vụ về cơ bản xếp hàng các bit và miếng từ cấu hình dự án của chúng tôi và thực hiện chúng.

Ví dụ: một nhiệm vụ có tên “kịch bản” có thể nối tất cả các tập lệnh của chúng tôi, sau đó thu nhỏ tệp kết quả và sau đó di chuyển nó đến vị trí cuối cùng. Cả ba hành động này đều được định nghĩa trong cấu hình dự án nhưng “kéo lại với nhau” theo nhiệm vụ. Nếu điều này chưa rõ ràng nhưng đừng lo lắng, tôi sẽ chỉ cho bạn cách thực hiện.

Nhiệm vụ đầu tiên của chúng tôi

Hãy tạo một tác vụ thu nhỏ một tệp javascript cho chúng tôi.

Có bốn điều chúng ta cần làm bất cứ khi nào chúng ta muốn thêm một nhiệm vụ mới:

• Cài đặt plugin nếu cần thiết
• Yêu cầu nó trong Gruntfile
• Viết một nhiệm vụ
• Thêm nó vào một nhóm nhiệm vụ nếu cần

(1) Tìm và cài đặt Plugin

Cách dễ nhất để tìm plugin bạn cần là nhập một cái gì đó như thế này vào Google: “giảm thiểu plugin javascript grunt”. Kết quả đầu tiên sẽ dẫn bạn đến plugin grunt-contrib-uglify, đây chính là thứ chúng ta cần.

Trang Github cho bạn biết tất cả những gì bạn cần biết. Cài đặt là một dòng duy nhất trong thiết bị đầu cuối, đây là những gì bạn cần sử dụng:

 npm cài đặt grunt-contrib-uglify --save-dev 

Bạn có thể cần phải chạy cái này với quyền quản trị viên. Nếu bạn nhận được một cái gì đó như npm ERR! Vui lòng thử chạy lại lệnh này với quyền root / Administrator. Trên đường đi, chỉ cần gõ sudo trước lệnh và nhập mật khẩu của bạn khi được nhắc:

 sudo npm cài đặt grunt-contrib-uglify --save-dev 

Lệnh này thực sự phân tích cú pháp của bạn pack.json tập tin và thêm nó như là một phụ thuộc ở đó, bạn sẽ không cần phải làm điều đó bằng tay.

(2) Yêu cầu trong Gruntfile

Bước tiếp theo là thêm vào Gruntfile của bạn như một yêu cầu. Tôi muốn thêm plugin ở đầu tệp, đây là Gruntfile hoàn chỉnh của tôi sau khi thêm grunt.loadNpmT task ('grunt-contrib-uglify');.

 module.exports = function (grunt) grunt.loadNpmT task ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('pack.json')); grunt.registerTask ('mặc định', []); ; 

(3) Tạo một tác vụ để thu nhỏ tập lệnh

Như chúng ta đã thảo luận, điều này nên được thực hiện trong initConfig () chức năng. Trang Github cho plugin (và hầu hết các plugin khác) cung cấp cho bạn nhiều thông tin và ví dụ. Đây là những gì tôi đã sử dụng trong dự án thử nghiệm của mình.

 uglify: build: src: 'js / scripts.js', Dest: 'js / scripts.min.js' 

Điều này khá đơn giản, tôi đã chỉ định scripts.js tệp trong thư mục js của dự án của tôi và đích đến cho tệp được rút gọn. Có nhiều cách để chỉ định tệp nguồn, chúng ta sẽ xem xét điều đó sau.

Bây giờ, chúng ta hãy xem Gruntfile hoàn chỉnh sau khi điều này đã được thêm vào, để đảm bảo bạn biết mọi thứ khớp với nhau như thế nào.

 module.exports = function (grunt) grunt.loadNpmT task ('grunt-contrib-uglify'); grunt.initConfig (pkg: grunt.file.readJSON ('pack.json'), uglify: build: src: 'scripts.js', Dest: 'scripts.min.js'); grunt.registerTask ('mặc định', []); ; 

(4) Thêm cấu hình này vào một nhóm nhiệm vụ

Ngay bây giờ bạn có thể đi đến thiết bị đầu cuối của bạn và gõ lẩm bẩm nhưng chúng ta sẽ cần các nhóm nhiệm vụ để chạy nhiều nhiệm vụ sau này. Chúng tôi có tác vụ mặc định trống, chỉ chờ một cái gì đó được thêm vào, vì vậy hãy sửa đổi nó thành như sau:

 grunt.registerTask ('mặc định', ['uglify']); 

Ở giai đoạn này, bạn sẽ có thể đi đến thiết bị đầu cuối, gõ tiếng càu nhàu và xem việc thu nhỏ diễn ra. Đừng quên tạo một scripts.js tập tin của khóa học!

Điều đó đã không mất nhiều thời gian để thiết lập phải không? Ngay cả khi bạn chưa quen với tất cả những điều này và bạn phải mất một thời gian để hoàn thành các bước, thời gian nó tiết kiệm sẽ vượt qua thời gian dành cho nó trong một vài lần sử dụng.

Tập tin liên kết

Chúng ta hãy xem các tập tin nối và tìm hiểu cách chỉ định nhiều tệp làm mục tiêu dọc đường.

Ghép nối là quá trình kết hợp nội dung của nhiều tệp thành một tệp duy nhất. Chúng ta sẽ cần plugin grunt-contrib-concat. Hãy làm việc qua các bước:

Để cài đặt plugin, hãy sử dụng npm cài đặt grunt-contrib-concat --save-dev trong thiết bị đầu cuối. Sau khi hoàn thành, hãy đảm bảo thêm nó vào Gruntfile của bạn giống như trước khi sử dụng grunt.loadNpmT Nhiệm vụ ('grunt-contrib-concat');.

Tiếp theo là cấu hình. Hãy kết hợp ba tệp cụ thể, cú pháp sẽ quen thuộc.

 concat: dist: src: ['dev / js / header.js', 'dev / js / myplugin.js', 'dev / js / footer.js'], Dest: 'js / scripts.js', ,, 

Đoạn mã trên lấy ba tệp được cung cấp làm nguồn và kết hợp chúng vào tệp được cung cấp làm đích.

Điều này đã khá mạnh mẽ nhưng nếu một tập tin mới được thêm vào thì sao? Chúng ta có cần quay lại đây mọi lúc không? Tất nhiên là không, chúng ta có thể chỉ định toàn bộ thư mục tệp để ghép.

 concat: dist: src: 'dev / js / *. js "], Dest:' js / scripts.js ',,, 

Bây giờ, mọi tệp javascript trong thư mục dev / js sẽ được hợp nhất thành một tệp lớn: js / scripts.js, tốt hơn nhiều!

Bây giờ là lúc tạo một tác vụ để chúng ta thực sự có thể ghép một số tệp.

 grunt.registerTask ('mergejs', ['concat']); 

Đây không còn là nhiệm vụ mặc định nữa nên chúng tôi cần nhập tên của nó vào thiết bị đầu cuối khi chúng tôi phát hành tiếng càu nhàu chỉ huy.

 hợp nhất grunt 

Tự động hóa tự động hóa của chúng tôi

Chúng ta đã đạt được nhiều tiến bộ nhưng còn nhiều hơn thế! Hiện tại, khi bạn muốn nối hoặc thu nhỏ, bạn cần vào terminal và gõ lệnh thích hợp. Đã đến lúc chúng ta hãy nhìn vào đồng hồ đeo tay lệnh sẽ làm điều này cho chúng ta. Chúng ta cũng sẽ học cách thực hiện các nhiệm vụ mulitple cùng một lúc, trên đường đi.

Để bắt đầu, chúng ta cần lấy đồng hồ đeo tay. Tôi chắc chắn rằng bây giờ bạn có thể cài đặt nó và thêm nó vào Gruntfile trên yuor, vì vậy tôi sẽ bắt đầu bằng cách cho bạn thấy những gì tôi sử dụng trong dự án thử nghiệm của mình.

 xem: scripts: files: ['dev / js / *. js'], tác vụ: ['concat', 'uglify'],, 

Tôi đặt tên cho một tập hợp các tập tin để xem “kịch bản”, chỉ để tôi biết nó làm gì Trong đối tượng này, tôi đã chỉ định các tệp để xem và các tác vụ sẽ chạy. Trong ví dụ ghép nối trước, chúng tôi đã tập hợp tất cả các tệp trong thư mục dev / js.

Trong ví dụ rút gọn, chúng tôi đã thu nhỏ tệp này. Thật ý nghĩa khi xem thư mục dev / js để thay đổi và chạy các tác vụ này bất cứ khi nào có bất kỳ.

Như bạn có thể thấy, nhiều tác vụ có thể được gọi dễ dàng bằng cách tách chúng bằng dấu phẩy. Chúng sẽ được thực hiện theo trình tự, đầu tiên là nối, sau đó là thu nhỏ trong trường hợp này. Điều này cũng có thể được thực hiện với các nhóm nhiệm vụ, đó là lý do tại sao chúng tồn tại.

Bây giờ chúng ta có thể sửa đổi tác vụ mặc định của mình:

 grunt.registerTask ('mặc định', ['concat', 'uglify']); 

Bây giờ chúng tôi có hai sự lựa chọn. Bất cứ khi nào bạn muốn nối và thu nhỏ tập lệnh của mình, bạn có thể chuyển sang thiết bị đầu cuối và nhập tiếng càu nhàu. Bạn cũng có thể sử dụng lệnh xem để bắt đầu xem các tệp của mình: đồng hồ lẩm bẩm.

Nó sẽ ngồi ở đó, chờ bạn sửa đổi những tập tin này. Khi bạn thực hiện, nó sẽ thực hiện tất cả các nhiệm vụ được giao cho nó, tiếp tục, thử nó.

Điều đó tốt hơn nhiều, không cần đầu vào từ chúng tôi. Bây giờ bạn có thể làm việc với các tệp của mình và mọi thứ sẽ được thực hiện tốt cho bạn.

Tổng quan

Với kiến ​​thức thô sơ về cách các plugin có thể được cài đặt và sử dụng và cách thức hoạt động của lệnh đồng hồ, bạn đã sẵn sàng trở thành một người nghiện tự động hóa. Có rất nhiều điều để Grunt hơn những gì chúng ta đã thảo luận nhưng không có gì bạn không thể tự mình xử lý.

Sử dụng các lệnh để biên dịch SASS, tối ưu hóa hình ảnh, tự động trộn lại và hơn thế nữa chỉ là vấn đề làm theo các bước chúng tôi đã thảo luận và đọc cú pháp mà plugin yêu cầu.

Nếu bạn biết một số cách sử dụng đặc biệt tuyệt vời cho Grunt, vui lòng cho chúng tôi biết trong các nhận xét, chúng tôi luôn quan tâm đến việc bạn sử dụng các công cụ như Grunt!