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ử codice_1, 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 
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.&lt;ref name="gulpjs/gulp"&gt;&lt;/ref&gt; 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.
Hoạt động.
Các tác vụ gulp được chạy từ shell Giao diện dòng lệnh (CLI) 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. Tác vụ mặc định chạy bằng codice_2. 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 codice_3. 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ử codice_1.
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. 
//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 
//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 codice_5 trong shell. Trong trường hợp dưới đây, tác vụ mặc định không làm gì cả. 
// 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 codice_5.
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 codice_7.
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. codice_8 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 /'."
codice_9 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 codice_10 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ó codice_11, 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. 
// 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 codice_12 và codice_13 ghi đè lên các tệp gốc với đầu ra. Đố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.