✨Gulp.js

gulp là bộ công cụ JavaScript mã nguồn mở của Fractal Innovations và cộng đồng nguồn mở tại GitHub, được sử dụng làm hệ thống xây dựng phát trực tuyến trong phát triển web front-end.

Nó là một trình chạy tác vụ xây dựng trên Node.js và NPM, được sử dụng để tự động hóa các nhiệm vụ tốn thời gian và lặp đi lặp lại liên quan đến việc phát triển web như việc rút gọn, ghép nối, ngăn chặn bộ nhớ cache, kiểm thử đơn vị, Linting, tối ưu hóa, vv

gulp sử dụng cách tiếp cận cấu hình bằng mã để xác định các nhiệm vụ của mình và dựa vào các plugin nhỏ, đơn mục đích để thực hiện chúng. Hệ sinh thái gulp bao gồm hơn 300 plugin như vậy.

Tổng quan

gulp là một công cụ xây dựng trong JavaScript được xây dựng trên các luồng nút. Các luồng này tạo điều kiện cho việc kết nối các hoạt động tập tin thông qua các đường ống. gulp đọc hệ thống tệp và chuyển dữ liệu được giao từ một plugin đơn mục đích của nó sang một plugin khác thông qua toán tử .pipe(), thực hiện một nhiệm vụ tại một thời điểm. Các tập tin gốc không bị ảnh hưởng cho đến khi tất cả các plugin được xử lý. Nó có thể được cấu hình để sửa đổi các tập tin gốc hoặc để tạo tập tin mới. Điều này cho phép khả năng thực hiện các tác vụ phức tạp thông qua việc liên kết nhiều plugin của nó. Người dùng cũng có thể viết các plugin riêng để xác định các tác vụ của riêng họ. Không giống như các trình chạy tác vụ khác chạy các tác vụ theo cấu hình, gulp yêu cầu kiến thức về JavaScript và mã hóa để xác định các tác vụ của nó. gulp là một hệ thống xây dựng có nghĩa là ngoài việc chạy tác vụ, nó cũng có khả năng sao chép tập tin từ nơi này đến nơi khác, biên dịch, triển khai, tạo ra các thông báo, kiểm tra đơn vị, Linting vv Grunt chạy các tác vụ bằng cách chuyển đổi các tệp và lưu dưới dạng các tệp mới trong các thư mục tạm thời và đầu ra của một tác vụ được lấy làm đầu vào cho một tác vụ khác và cứ thế cho đến khi đầu ra đến thư mục đích. Điều này liên quan đến rất nhiều lần gọi I / O và tạo nhiều tệp tạm thời. Trong khi đó, luồng gulp qua hệ thống tệp và không yêu cầu bất kỳ vị trí tạm thời nào trong số này làm giảm số lượng lần gọi I / O, do đó cải thiện hiệu suất. Grunt sử dụng các tệp cấu hình để thực hiện các tác vụ trong khi gulp yêu cầu tệp xây dựng của nó phải được mã hóa. Trong Grunt, mỗi plugin cần được cấu hình để khớp vị trí đầu vào của nó với đầu ra của plugin trước đó. Trong một gulp, các plugin được tự động theo đường ống. Tác vụ mặc định chạy bằng $gulp. Các tác vụ riêng lẻ có thể được xác định bởi gulp.task và được điều hành bởi gulp . Các tác vụ phức tạp được xác định bằng cách xâu chuỗi các plugin với sự trợ giúp của toán tử .pipe().

Cấu tạo của gulpfile

gulpfile là nơi mà tất cả các hoạt động được xác định trong gulp. Cấu tạo cơ bản của gulpfile bao gồm các plugin cần thiết được bao gồm ở đầu, định nghĩa của các tác vụ và một tác vụ mặc định ở cuối.

Plugin

Bất kỳ plugin được cài đặt nào được yêu cầu để thực hiện một tác vụ sẽ được thêm vào đầu gulpfile dưới dạng phụ thuộc theo định dạng sau. //Defining tasks gulp.task ( 'taskName', function () { //do something });

Ngoài ra, một tác vụ thực hiện một số chức năng được xác định trước có thể được tạo ra. Các hàm này được truyền dưới dạng tham số thứ hai dưới dạng một mảng. function fn1 () { // do something }

function fn2 () { // Do something else }

// Task with array of function names gulp.task ( 'taskName', ['fn1','fn2']);

Tác vụ mặc định

Tác vụ mặc định sẽ được xác định ở cuối gulpfile. Nó có thể được chạy bởi lệnh gulp trong shell. Trong trường hợp dưới đây, tác vụ mặc định không làm gì cả.

Sau đó, mô-đun phải ở đầu gulpfile 'được xác định' là: var imagemin = require ( 'gulp-imagemin');

Tác vụ hình ảnh tiếp theo tối ưu hóa hình ảnh. gulp.src () lấy tất cả các hình ảnh có phần mở rộng.png,.gif hoặc.jpg trong thư mục _'images-orig /'._

.pipe (imagemin ()) kênh các hình ảnh được tìm thấy, thông qua quá trình tối ưu hóa và với .pipe (gulp.dest ()) các hình ảnh được tối ưu hóa được lưu vào thư mục 'hình ảnh /'. Nếu không có gulp.dest (), hình ảnh thực sự sẽ được tối ưu hóa, nhưng không được lưu trữ. Vì các hình ảnh được tối ưu hóa được lưu trữ vào một thư mục khác, nên các hình ảnh gốc vẫn không bị thay đổi. Đối với điều này, trước hết người ta phải quay trở lại các plugin gulp-uglify cần thiết về cài đặt gói NPM vào đầu gulpfile, module nên được xác định. // Script task gulp.task ( 'scripts', function () { gulp.src ( 'scripts/*. js') .pipe (uglify ()) .pipe (gulp.dest ( 'scripts/')); });

Tác vụ xem

Tác vụ xem phục vụ để phản ứng với những thay đổi trong tệp. Trong ví dụ sau, các tác vụ với tên tập lệnh và hình ảnh được gọi khi bất kỳ tệp hoặc hình ảnh JavaScript nào thay đổi trong các thư mục được chỉ định. // Rerun the task When a file changes gulp.task ( 'watch', function () { gulp.watch ( '. scripts/js ', [ 'scripts']); gulp.watch ( 'images-orig/', [ 'images']); });

Hơn nữa, có thể thực hiện cập nhật nội dung trình duyệt bằng cách sử dụng các tác vụ Xem. Đối với điều này, có rất nhiều tùy chọn và plugin.