Advertisement
  1. Code
  2. JavaScript

Quy trình làm việc tự động cho JavaScript với Grunt và Gulp

by
Read Time:14 minsLanguages:
Sponsored Content

This sponsored post features a product relevant to our readers while meeting our editorial guidelines for being objective and educational.

Vietnamese (Tiếng Việt) translation by Andrea Ho (you can also view the original English article)

Khi bạn mới bắt đầu phát triển front-end và bắt đầu thuần thục HTML5, CSS và JavaScript, bước tiếp theo rõ ràng là chạm tay bạn đến các công cụ mà hầu hết các nhà phát triển sử dụng để duy trì ổn định không gian phức tạp này. Bạn cũng xứng đáng có thêm sự linh hoạt và các tính năng nổi bật trong khi viết các trang CSS của bạn bằng cách sử dụng Less. Bạn cũng xứng đáng để tối ưu hóa băng thông bằng cách giảm thiểu mã JS của bạn. Bạn quá xứng đáng để có thể tự động kiểm tra xem mã JS của bạn có sử dụng JSHint hay không.

Bạn xứng đáng với tất cả những thứ tốt đẹp này.

Vì vậy, bạn bắt đầu tận tay sử dụng tất cả các công cụ tuyệt vời này, tự tay vận hành chạy ngày càng nhiều dòng lệnh. Đôi khi, bạn quên chạy trình biên dịch Less… Đôi khi bạn quên chạy JSHint và một lỗi xuất hiện...

Và bỗng dưng bạn tự hỏi mình: liệu có giải pháp nào để tự động hoá tất cả các công cụ này không? Làm thế nào bạn có thể tạo một quy trình làm việc lặp lại để ngăn bạn không phải mắc lỗi nữa?

Rõ ràng có một giải pháp, và hai công cụ đặc biệt đang chờ bạn bắt đầu: GruntGulp.

Là một người lần đầu sử dụng những công cụ này, bạn đang tự hỏi làm chúng hoạt động ra sao và chọn sử dụng cái nào để sử dụng, phải không? Vâng, hoàn hảo, bạn đang đọc đúng bài viết!

1. Các ví dụ mẫu chúng tôi sẽ sử dụng

Tôi sẽ chỉ cho bạn căn bản để sử dụng Grunt và Gulp qua một ví dụ thực sự đơn giản mà bạn có thể tải xuống từ GitHub.

Nó là một trang web đơn giản bao gồm ba file:

list of files indexhtml mainjs and styleslesslist of files indexhtml mainjs and styleslesslist of files indexhtml mainjs and stylesless

Styles.less định nghĩa trang CSS theo cách phong phú hơn cách sử dụng file CSS chuẩn. Sau cùng, chúng ta sử dụng trình biên dịch Less để tạo một file styles.css. Sử dụng Less, chúng ta có thể sử dụng các biến trong file CSS:

variables in the css filevariables in the css filevariables in the css file

Biết thêm thông tin về LESS trong hướng dẫn Getting Started này.

Mã nguồn JavaScript và HTML thực sự đơn giản. Trang sẽ trông giống như sau:

Simple HTML web pageSimple HTML web pageSimple HTML web page

2. Hiểu về Package Manager của Node.js

Trước tiên, bạn cần hiểu cách Package Manger của Node.js (npm) hoạt động như thế nào.

Npm là công cụ được cung cấp cùng với Node.JS. Nó được dùng để tải về các công cụ và framework trong khi tự động giải quyết các phụ thuộc của chúng.

Ví dụ, để sử dụng Less và biên dịch nó thành một file CSS có thể sử dụng trên web, trước tiên bạn cần phải cài đặt Less bằng cách sử dụng lệnh này:

Chú ý: Để sử dụng được dòng lệnh npm, bạn phải cài đặt Node.js từ website của Node.

Khi việc này hoàn thành, bạn có thể chạy lệnh này để biên dịch các file .less thành .css:

Npm sử dụng package.json - được tạo ra và lưu trữ trong thư mục cục bộ mà nó đang làm việc. Tệp này sử dụng định dạng JavaScript Object Notation (JSON) để cho npm biết công cụ và phiên bản nào được cài đặt và các framework được sử dụng bởi project hiện tại (được đại diện bằng thư mục hiện hành).

Tệp này rất quan trọng đối với Grunt và Gulp vì nó sẽ chứa danh sách các plugin đã được tải về và có thể sử dụng được trong quy trình làm việc tự động của bạn.

Để tạo một file package.json rỗng, bạn có thể sử dụng lệnh npm sau:

Bạn sẽ trải qua một số câu hỏi mà bạn có thể trả lời bằng cách sử dụng tùy chọn mặc định, và sau đó bạn sẽ được thiết lập để bắt đầu.

Trong file này, bạn sẽ có hai loại phụ thuộc:

  • loại cần cho việc xử lý ứng dụng web của bạn hoặc ứng dụng Node.js
  • và loại cần cho giai đoạn phát triển (như Less) và được sử dụng để biên dịch hoặc kiểm tra mã nguồn của bạn

Npm về cơ bản cung cấp cho bạn ba cách để cài đặt các package:

  • tác động toàn cục trên máy của bạn bằng cách sử dụng tùy chọn –g hoặc -global
  • cho mục đích xử lý, phạm vi cục bộ trên thư mục dự án của bạn bằng cách không dùng tuỳ chọn bổ sung nào (chỉ npm cài đặt [công cụ hoặc framework])
  • cho mục đích dev, phạm vi cục bộ trên thư mục dự án của bạn bằng cách sử dụng tùy chọn --save-dev

Cách thứ ba sẽ tạo ra một phần hoặc thuộc tính devDependencies bên trong file package.json.

devDependencies section property inside the packagejson filedevDependencies section property inside the packagejson filedevDependencies section property inside the packagejson file

3. Grunt

Grunt là gì?

Grunt là người tiên phong trong lĩnh vực quy trình tự động hóa JavaScript. Grunt được nhiều người dùng danh tiếng sử dụng như Twitter, jQuery và Modernizr.

Nguyên tắc cơ bản của Grunt là cung cấp cho chúng ta một cách dễ dàng chạy tasks. Một tác vụ là tập hợp các file code và file cấu hình đã được tạo ra. Bạn có thể nhận tác vụ mới bằng cách cài đặt các plugin Grunt mà bạn sẽ dùng thông qua npm. Bạn có thể tìm thấy một plugin khá dễ cho công cụ mà bạn muốn sử dụng, chẳng hạn như LessJSHint.

Để chạy Grunt, bạn phải tạo một Gruntfile, trong đó bạn chỉ định các tác vụ nào bạn muốn chạy và cấu hình cho từng tác vụ. Một khi việc này hoàn tất, bạn chỉ phải chạy dòng lệnh grunt xác định tác vụ bạn muốn chạy (mặc định hoặc một công cụ cụ thể) và nó sẽ tự động thực hiện.

Bây giờ chúng ta hãy xem qua một hướng dẫn từng bước để thiết lập tất cả điều này.

Bước 1. Tạo file Package.json

Sử dụng npm để khởi tạo file:

Bạn sẽ phải trả lời một số câu hỏi như tên dự án và file .js mặc định là gì. Bạn cũng có thể chọn tự mình tạo file và đặt nội dung của file thành:

Bước 2. Cài đặt Grunt toàn cục và cục bộ

Bạn cần phải cài đặt Grunt toàn cục để dùng dòng lệnh và cài đặt cục bộ để khởi tạo mọi thứ cần thiết cho dự án.

Chạy:

Sau đó chạy ở cấp cục bộ:

Lưu ý: Đừng quên phần –dev để nó được chỉ định là một trong các devDependencies trong file package.json.

Bước 3. Tạo GruntFile.js

Grunt hoạt động bằng cách sử dụng một file có tên gruntFile.js. Tệp này chứa mọi thứ Grunt cần dùng:

  • cấu hình cho các tác vụ
  • các tác vụ tùy biến
  • tải tác vụ

Grunt hy vọng file sẽ xuất ra một hàm duy nhất có một tham số có tên là "grunt". Bạn sẽ sử dụng đối tượng này để thực hiện tất cả các hành động liên quan đến Grunt.

Đây là một file gruntfile tối giản để chỉ đọc file package.json và tạo một tác vụ default không chạy gì cả.

Lưu ý: đặt file trong thư mục dự án, liền kế với file package.json.

Bạn có thể thực thi nó để chắc chắn đã cấu hình đúng mọi thứ.

Để làm điều đó, mở cửa sổ lệnh trên thư mục project và chạy:

Bạn sẽ thấy nó như thế này:

Done without errorsDone without errorsDone without errors

Bước 4. Bổ sung tác vụ đầu tiên của bạn: JSHint

Bây giờ Gruntfile của bạn đã sẵn sàng, bước tiếp theo là thêm một plugin và sử dụng nó. Tất cả các plugin có thể được tìm thấy trong danh sách trên website của Grunt. Một trong những tác vụ phổ biến được thực hiện trong Gruntfile là kiểm tra xem cú pháp JavaScript có đúng không. Để làm điều đó, ta thường sử dụng JSHint.

Hãy thêm plugin này vào quy trình công việc grunt.

Nếu bạn tìm kiếm JSHint trên trang grunt plugins, bạn sẽ tìm thấy grunt-contrib-jshint, phù hợp với điều chúng ta cần!

Trong thư mục project, chạy:

Một khi hoàn tất, bạn phải thêm nó vào Gruntfile.js. Có hai bước đơn giản để thực hiện:

  1. Nạp plugin.
  2. Cấu hình cho tác vụ.

Để nạp plugin, hãy sử dụng hàm loadNpmTasks:

Cấu hình được thực hiện trong hàm initConfig, ở hàm này bạn phải thêm một thuộc tính mới cho đối tượng được truyền đến làm tham số. Thuộc tính này phải là tên của tác vụ bạn muốn bổ sung và có liên quan đến plugin bạn sử dụng. Cách tốt nhất để biết tên đó và danh sách các tùy chọn được hỗ trợ cho tác vụ là đọc tài liệu về plugin. Bạn sẽ luôn tìm thấy một ví dụ được ghi chép đầy đủ.

Ví dụ, trong ví dụ của chúng ta, tôi muốn kiểm tra tất cả các file JavaScript ngoại trừ gruntfile.js. Chúng tôi cũng muốn kích hoạt một tập hợp các quy tắc để kiểm tra trong các file JavaScript như eqeqeq để đảm bảo chúng tôi sử dụng ba lần bằng nhau khi cần.

Đây là hàm initConfig đã được thay đổi:

Code for the initConfig function modifiedCode for the initConfig function modifiedCode for the initConfig function modified

Bạn có thể chạy tác vụ của mình bằng cách sử dụng dòng lệnh sau (ở đây bạn chỉ định tên tác vụ làm tham số cho grunt):

Kết quả ở đây:

Done without errorsDone without errorsDone without errors

Bạn vừa phải chạy lệnh đó và nó sẽ tự động nhắc nhở các lỗi bất kỳ nó gặp phải với bạn.

Xin chúc mừng, bây giờ bạn có một tác vụ tự động trong quy trình làm việc grunt của bạn!

Bước 5. Thêm một tác vụ thứ hai: biên dịch Less

Tác vụ JSHint hoạt động tốt, nhưng nó có chút lẻ loi trong quy trình. Thông thường, chúng ta sử dụng các công cụ như Grunt để chạy nhiều tác vụ.

Thực sự dễ dàng để bổ sung thêm nhiều tác vụ vì bạn chỉ cần làm theo các bước tương tự. Giả sử bạn bây giờ muốn thêm trình biên dịch cho file less của bạn bên trong quá trình tự động. Nếu bạn tìm kiếm trong các plugin Grunt, bạn sẽ tìm thấy một plugin grunt-contrib-less mà bạn có thể cài đặt trong thư mục project của bạn:

Giống như tác vụ JSHint, bạn phải bổ sung cấu hình:

code to add the configurationcode to add the configurationcode to add the configuration

Sau đó, nạp tác vụ:

code to load the taskcode to load the taskcode to load the task

Bây giờ bạn có thể chạy Grunt và chỉ định nhiệm vụ less: điều này sẽ khởi động một mình Less. Ổn thôi, nhưng bạn muốn chạy tất cả các tác vụ, phải không? Đó là vai trò của tác vụ default:

Khi bạn chỉ chạy grunt mà không chỉ định bất kỳ tác vụ nào, nó sẽ tìm kiếm một tác vụ default và chạy tất cả các tác vụ được chỉ định trong mảng chứa tác vụ mặc định của nó. Bạn có thể sửa đổi nó để chạy less và jshint. Lưu ý rằng để bổ sung một nhóm các tác vụ như default, bạn cần gọi hàm registerTask:

code to call the registerTask functioncode to call the registerTask functioncode to call the registerTask function

Từ bây giờ, khi bạn chạy grunt, nó sẽ chạy jshint, và sau đó là less:

Running less task done without errorsRunning less task done without errorsRunning less task done without errors

Bạn có thể thêm bất kỳ tác vụ nào bạn muốn và bạn cũng có thể chỉ định nhóm tác vụ khác như default và gọi chúng bằng cách chuyển tên của chúng làm đối số cho dòng lệnh grunt.

Dễ dàng, phải không?

Bước 6. Sử dụng Watch để bạn không cần phải chạy Grunt theo cách thủ công

Giờ đây, bạn là một nhà phát triển hạnh phúc. Tất cả tác nhiệm vụ lặp đi lặp lại của bạn được tự động bên trong một quy trình công việc với grunt, và bạn chỉ cần chạy lệnh grunt để chúng thực thi. Nhưng thậm chí còn có thể dễ dàng hơn nữa. Nó có thể được thực hiện tự động.

Để làm điều đó, bạn có thể bổ sung một tác vụ cụ thể có tên watch. Tác vụ này sẽ liên tục quan sát thư mục làm việc của bạn và dựa trên các quy luật, khi một file được sửa đổi, grunt sẽ thực thi một tác vụ liên quan.

Trước tiên, cài đặt watch trong thư mục project:

Tải plugin này giống như tất cả các tác vụ khác bằng hàm loadNpmTasks và cấu hình cho nó. Ở đây phần cấu hình hơi khác một chút vì bạn cần chỉ định cấu hình cho từng tác vụ bạn muốn bao gồm bằng cách sử dụng watch.

code to specify a configuration for each task you want to cover using watchcode to specify a configuration for each task you want to cover using watchcode to specify a configuration for each task you want to cover using watch

Để biết thêm thông tin, bạn có thể đọc tài liệu đầy đủ cho tác vụ này.

Khi bạn muốn kích hoạt watch, bạn chỉ cần chạy lệnh sau:

Và nó sẽ thực hiện các tác vụ mỗi khi một file được thay đổi và file này nằm trong phạm vi của các file được quan sát cho tác vụ cụ thể.

execute tasks each time a file is changed and this file is in the scope of watched files for the specific taskexecute tasks each time a file is changed and this file is in the scope of watched files for the specific taskexecute tasks each time a file is changed and this file is in the scope of watched files for the specific task

Và thế đấy! Giờ bạn biết mọi thứ để tạo quy trình làm việc tự động bằng cách sử dụng grunt.

4. Gulp

Gulp là gì?

Gulp là một giải pháp thay thế cho grunt. Nó xuất hiện sau một chút và được biết đến là linh hoạt hơn grunt. Trước khi chọn lựa bạn sẽ sử dụng cái nào, hãy cùng xem cách thức hoạt động của gulp.

Gulp là một công cụ tự động hóa quy trình làm việc. Giống như grunt, nó hoạt động bằng cách sử dụng npm và file package.json. Tất cả các plugin hỗ trợ sẵn cũng sẽ được tải xuống bằng cách sử dụng npm và được bổ sung dưới dạng devDependencies trong file package.json.

Một trong những điểm khác biệt chính là Gulp sử dụng các stream (luồng). Stream là một tập hợp các hàm mà qua đó một file sẽ được chuyển đến và được sửa đổi trong bộ nhớ. File này sẽ được ghi trên đĩa chỉ khi vào lúc cuối của quá trình, do đó, nó sẽ hiệu quả hơn. Các tác vụ Grunt, mặt khác, làm việc như silo và không thể nối tiếp nhau.

Chúng ta hãy xem nhanh Gulp hoạt động thế nào bằng cách làm theo một vài bước đơn giản.

Bước 1. Tạo file Package.json

Tương tự như Grunt, trước tiên bạn phải tạo file package.json. Bạn có thể dùng chính xác các kỹ thuật tương tự như bạn đã sử dụng cho ví dụ grunt.

Bước 2. Cài đặt Gulp và Gulp-Util toàn cục và cục bộ

Khi file package.json được tạo ra, hãy cài đặt gulp trên toàn cục và cục bộ bằng cách sử dụng:

Việc này sẽ cài đặt dòng lệnh gulp và mọi thứ cần thiết để chạy một quy trình làm việc của gulp.

Sau đó, bạn phải cài đặt gulp utils, nó chứa các hàm phổ biến được chia sẻ từ các plugin khác:

Cuối cùng, tạo file gulp tối giản, nó sẽ trông giống như sau:

Như bạn có thể thấy, nó hơi khác so với cú pháp grunt. Trong gulp, các plugin được tải bằng cách sử dụng cú pháp require như bạn có thể thấy quen thuộc nếu bạn là một nhà phát triển Node.js. Cũng có một tác vụ default được định nghĩa bằng hàm gulp.task.

Nếu bạn chạy dòng lệnh gulp bằng cách dùng cửa sổ dòng lệnh trong thư mục project, bạn sẽ thấy kết quả như sau:

result of running the gulp command line using a command promptresult of running the gulp command line using a command promptresult of running the gulp command line using a command prompt

Bước 3. Sử dụng tác vụ đầu tiên của bạn: Biên dịch Less

Để sử dụng một plugin trong gulp, bạn sử dụng hàm tương tự như hàm chúng tôi đã sử dụng để tạo tác vụ default. Bởi vì bạn không phải dùng một tên cụ thể để tạo một tác vụ. Bạn chỉ cần gọi gulp.task, đặt tên bạn muốn và đặt cho nó một hàm JavaScript làm tham số thứ hai. Khi gulp chạy tác vụ, nó sẽ chạy hàm này.

Để sử dụng plugin, bạn gọi nó bằng tên bạn đã chọn khi yêu cầu. Thông thường, bạn gọi nó là một phần của quy trình làm việc theo stream và nó thường bắt đầu bằng một tập hợp các file. Điều này được thực hiện với hàm gulp.src. Nó sẽ chọn một loạt các file và trả về một stream có thể được sử dụng bởi một hàm khác bằng cách sử dụng pipe. Đó là cách bạn có thể tiếp nối nhiều hành động mà không cần ghi chúng vào ổ đĩa. Bạn chỉ cần truyền stream từ một plugin này sang plugin khác.

Đây là một ví dụ cho Less:

basic sample for lessbasic sample for lessbasic sample for less

Đầu tiên ta gọi require ('gulp-less') để tãi plugin less cho gulp. (Chúng ta thực hiện bằng lệnh npm install gulp-less --save-dev)

Vậy gulp.src sẽ chọn tất cả file .less, chúng ta pipe (tập hợp) nó vào hàm less() và sau cùng nó được tập hợp vào gulp.dest để báo hiệu nơi nào để ghi ra kết quả. Khi gulp.src có thể chọn nhiều hơn một file, thì gulp.dest xác định một thư mục.

Một khi bạn hiểu được mô hình piping, bạn có thể dễ dàng có được kết quả tương tự như kết quả khi dùng grunt.

Thế mạnh của gulp là bạn có thể tạo các tác vụ tùy ý mà bạn gọi nhiều hơn một plugin và nơi bạn có thể kết hợp chúng theo cách bạn muốn.

Lưu ý: tất nhiên có một plugin là gulp-watch để bạn có thể sử dụng để tự động hóa việc khởi chạy quy trình công việc của bạn!

Kết luận: Chọn cái nào?

Tôi hy vọng rằng giờ bạn hiểu rõ ràng hơn về lý do tại sao bạn cần một quy trình làm việc tự động hóa và cách bạn có thể sử dụng Grunt hoặc Gulp để đạt được điều đó.

Chọn lựa một trong hai tuỳ vào tác vụ bạn muốn thực hiện.

Grunt thì dễ sử dụng. Bạn không cần phải hiểu hệ thống piping, và việc hoàn thành các nhiệm vụ đơn giản sẽ minh bạch hơn. Nó là một công cụ thực sự hoàn thiện, được sử dụng bởi rất nhiều biên tập viên và nhà phát triển danh tiếng, và cung cấp rất nhiều plugin có sẵn.

Điều đó nói rằng, cách Gulp được thiết kế có thể mang đến sự linh hoạt cho bạn. Gulp đã xuất hiện trong một thời gian khá lâu rồi, và thậm chí nếu bạn không tìm thấy nhiều plugin cho nó như Grunt, thì tất cả các plugin mẫu mực đều sẵn có cho Gulp.

Nếu bạn đang sử dụng một quy trình công việc tiêu chuẩn phổ biến với JSHint, uglifying, CSS validating, vv, Grunt là một lựa chọn tốt. Nếu bạn đang hướng đến các tác vụ phức tạp hơn, Gulp sẽ là một trợ lý tuyệt vời.

Thông tin bổ sung

Thêm phần thực hành với JavaScript

Microsoft có một loạt các bài học miễn phí về nhiều chủ đề JavaScript nguồn mở, và chúng tôi có sứ mệnh tạo nhiều chủ đề hơn với Microsoft Edge. Đây là một số chủ đề để xem qua:

Và vài công cụ miễn phí để bắt đầu: Visual Studio, Azure Trial, và các công cụ kiểm tra đa trình duyệt - hỗ trợ Mac, Linux và Windows.

Bài viết này là một phần của loạt bài web dev tech từ Microsoft. Chúng tôi rất hứng khởi chia sẻ Microsoft Edgecơ chế tạo hình EdgeHTML mới với các bạn. Hãy dùng máy ảo miễn phí hoặc kiểm tra từ xa trên máy Mac, iOS, Android, hoặc thiết bị Windows @ http://dev.modern.ie.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.