Gulp.js

gulp

Phát triển bởi	Fractal and contributors of the GitHub community
Phiên bản ổn định	4.0.0 / 31 tháng 12 năm 2017; 6 năm trước (2017-12-31)[1]
Kho mã nguồn	github.com/gulpjs/gulp
Nền tảng	Cross-platform
Ngôn ngữ có sẵn	JavaScript
Thể loại	Toolkit
Giấy phép	MIT License[2]
Website	gulpjs.com

gulp là bộ công cụ JavaScript mã nguồn mở của Fractal Innovations ^[3] 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 ^[4]

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.^[5]

Tổng quan

gulp ^[6] 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.^[7] 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ọ.^[8] 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 ^[3]

Nhu cầu cho một trình chạy tác vụ

Các trình chạy tác vụ như gulp và Grunt được xây dựng trên Node.js chứ không phải npm, vì các tập lệnh npm cơ bản không hiệu quả khi thực hiện nhiều tác vụ. Mặc dù một số nhà phát triển thích các tập lệnh npm vì chúng có thể đơn giản và dễ thực hiện, có rất nhiều cách mà gulp và Grunt dường như có lợi thế hơn nhau và các tập lệnh được cung cấp mặc định.^[9] 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.^[10] 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.^[7]

Hoạt động

Các tác vụ gulp được chạy từ shell Giao diện dòng lệnh (CLI) ^[9] và yêu cầu package.json và gulpfile.js (hoặc đơn giản là gulpfile) trong thư mục gốc của dự án. Gulpfile là nơi các plugin được tải và các tác vụ được xác định. Đầu tiên, tất cả các mô-đun cần thiết được tải và sau đó các tác vụ được xác định trong gulpfile. Tất cả các plugin cần thiết được chỉ định trong gulpfile được cài đặt vào devDependencies.^[11] 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 <task> <othertask>.^[12] 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().^[13]

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.^[14]

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.^[12][13]

//Adding dependencies
var gulp = require ('gulp');
var gutil = require ('util-gulp');

Tác vụ

Các tác vụ sau đó có thể được tạo ra. Một tác vụ gulp được xác định bởi gulp.task và lấy tên của tác vụ làm tham số đầu tiên và một hàm làm tham số thứ hai.

Ví dụ sau đây cho thấy việc tạo ra một nhiệm vụ gulp. Tham số đầu tiên taskName là bắt buộc và chỉ định tên mà tác vụ trong trình bao có thể được thực thi ^[15]

//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ả.^[13]

// Gulp default task
gulp.task ( 'default', [ '']);

Tác vụ mặc định được sử dụng trong gulp để chạy bất kỳ số lượng tác vụ phụ phụ thuộc nào được xác định ở trên theo thứ tự liên tục. gulp cũng có thể giám sát các tệp nguồn và chạy một tác vụ thích hợp khi các thay đổi được thực hiện đối với các tệp. Các tác vụ phụ sẽ được đề cập như là các thành phần của mảng trong tham số thứ hai. Quá trình có thể được kích hoạt bằng cách chạy tác vụ mặc định bằng lệnh gulp.^[14]

Tác vụ ví dụ

Tác vụ hình ảnh

Đối với ví dụ sau, plugin gulp-fantemin là bắt buộc. Để cài đặt plugin, hãy chạy lệnh npm install --save-dev gulp-imagemin.^[16]

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ữ.^[17] 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.^[13]

// Images task 
gulp.task ( 'images', function () {
    gulp.src ( 'images-orig/*. {png, gif, jpg}')
        .pipe (imagemin ())
        .pipe (gulp.dest ( 'images/'));
});

Tác vụ tập lệnh

Trong ví dụ sau, tất cả các tệp JavaScript từ thư mục 'scripts /' được tối ưu hóa với .pipe (uglify ()) và gulp. dest ( 'scripts/') ghi đè lên các tệp gốc với đầu ra.^[18] Đố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 ^[19] 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.^[20]

// 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.^[21] Đối với điều này, có rất nhiều tùy chọn và plugin.

Tham khảo

1. “gulp changelog”. Truy cập ngày 11 tháng 1 năm 2018.
2. “License to github.com” (bằng tiếng Anh). Truy cập ngày 30 tháng 5 năm 2016.
3. ^ Jed Mao; Maximilian Schmitt; Tomasz Stryjewski; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (ấn bản thứ 1). Bleeding Edge Press. ISBN 978-1-939902-14-6.
4. “Building With Gulp – Smashing Magazine”. Smashingmagazine.com. Truy cập ngày 14 tháng 12 năm 2016.
5. “gulp.js plugin registry”. Gulpjs.com. Truy cập ngày 14 tháng 12 năm 2016.
6. “gulpjs/gulp”. GitHub. Truy cập ngày 22 tháng 9 năm 2016.
7. ^ “substack/stream-handbook: how to write node programs with streams”. GitHub. Truy cập ngày 14 tháng 12 năm 2016.
8. “gulpjs/gulp”. GitHub. Truy cập ngày 22 tháng 9 năm 2016.
9. ^ “gulpjs/gulp”. GitHub. Truy cập ngày 23 tháng 9 năm 2016.
10. “Gulp for Beginners”. CSS-Tricks. 1 tháng 9 năm 2015. Truy cập ngày 14 tháng 12 năm 2016.
11. “install | npm Documentation”. docs.npmjs.com. Truy cập ngày 22 tháng 9 năm 2016.
12. ^ “gulpjs/gulp”. GitHub. Truy cập ngày 23 tháng 9 năm 2016.
13. ^ Maynard, Travis (2015). Getting Started with Gulp. Packt Publishing Ltd. ISBN 9781784393472.
14. ^ “An Introduction to Gulp.js - SitePoint” (bằng tiếng Anh). 10 tháng 2 năm 2014. Truy cập ngày 23 tháng 9 năm 2016.
15. “gulp/API.md at 4.0 · gulpjs/gulp · GitHub”. GitHub. 12 tháng 5 năm 2016. Truy cập ngày 14 tháng 12 năm 2016.
16. “gulp-imagemin”. Npmjs.com. Truy cập ngày 14 tháng 12 năm 2016.
17. “Durchstarten mit Gulp.js – Websites optimieren, Arbeitsabläufe automatisieren”. Magazin.phlow.de. 25 tháng 5 năm 2014. Bản gốc lưu trữ ngày 16 tháng 6 năm 2017. Truy cập ngày 14 tháng 12 năm 2016.
18. “Front-end Workflow mit Gulp - Liechtenecker”. Liechtenecker.at. 29 tháng 5 năm 2015. Bản gốc lưu trữ ngày 25 tháng 6 năm 2016. Truy cập ngày 14 tháng 12 năm 2016.
19. “gulp-uglify”. Npmjs.com. Truy cập ngày 14 tháng 12 năm 2016.
20. “gulp-watch”. Npmjs.com. Truy cập ngày 23 tháng 9 năm 2016.
21. “Browsersync + Gulp.js”. Browsersync.io. Truy cập ngày 14 tháng 12 năm 2016.

Tài liệu

• Jed Mao; Maximilian Schmitt; Tomasz Stryjewski; Cary Country Holt; William Lubelski (2014). Developing a Gulp Edge (ấn bản thứ 1). Bleeding Edge Press. ISBN 978-1-939902-14-6.
• Den Odell (2014). “Build Tools and Automation”. Pro JavaScript Development Coding, Capabilities, and Tooling. Apress. ISBN 978-1-4302-6268-8.
• Maynard, Travis (2015). Getting Started with Gulp. Packt Publishing Ltd. ISBN 9781784393472.

Liên kết ngoài

• Website chính thức
• gulp trên GitHub