Gulp là gì?

Gulp là gì?

Gulp là một công cụ giúp bạn tự động hóa nhiều task (nhiệm vụ) trong quá trình phát triển web. Nó thường được sử dụng để làm các tác vụ front end như:

• Tạo ra một web server
• Reload trình duyệt một cách tự động bất cứ khi nào một file được lưu
• Sử dụng các preprocessor giống như Sass hoặc LESS
• Tối ưu hóa các tài nguyên như CSS, JavaScript và hình ảnh

Đây không phải là một danh sách toàn diện về những thứ mà Gulp có thể làm. Nếu muốn, bạn có thể tạo một generator web site tĩnh. Gulp cực kỳ mạnh mẽ, nhưng bạn cần học cách sử dụng Gulp nếu muốn tạo ra một quá trình (process) của riêng mình.

Tại sao lại là Gulp?

Những công cụ như Gulp thường được đề cập như là "build tools" bởi vì chúng là những công cụ thực hiện các task trong quá trình xây dựng một website. Hai build tools phổ biến nhất hiện giờ là Gulp và Grunt. Tất nhiên, vẫn có những công cụ khác chẳng hạn như Broccoli, Brunch.

Có nhiều bài viết đề cập tới sự khác nhau giữa Grunt và Gulp và lý do tại sao bạn lại sử dụng công cụ này mà không phải là các công cụ khác. Nhưng điểm khác biệt chính là cách bạn cấu hình một workflow với chúng. Gulp cấu hình ngắn hơn và đơn giản hơn khi so sánh với Grunt. Gulp cũng chạy nhanh hơn.

Cái chúng ta sẽ làm

Khi kết thúc bài viết này, bạn sẽ có một workflow thực hiện các task sau:

• Tạo ra một web server
• Biên dịch Sass thành CSS
• Refesh trình duyệt tự động bất cứ khi nào bạn lưu một file
• Tối ưu hóa các tài nguyên (CSS, JS, fonts, và hình ảnh) cho phiên bản production

Bạn cũng sẽ học cách nối một chuỗi các task khác nhau vào một lệnh đơn giản.

Hãy bắt đầu bằng cách cài đặt Gulp trên máy tính của bạn.

Cài đặt Gulp

Bạn cần cài đặt Node.js trước khi có thể cài đặt Gulp.

Sau khi đã cài đặt Node, bạn có thể cài đặt Gulp bằng cách sử dụng lệnh sau:

$ sudo npm install gulp -g

Chú ý: chỉ những người sử dụng Mac mới cần sử dụng từ khóa sudo

npm install là lệnh sử dụng Node Package Manager (npm) để cài đặt Gulp trên máy tính của bạn.

Cờ -g trong lệnh này nói với npm cài Gulp với phạm vi toàn cục trên máy tính của bạn, nó cho phép sử dụng lệnh gulp ở bất kỳ đâu trên hệ thống của bạn.

Bây giờ Gulp đã được cài đặt, hãy tạo ra một dự án sử dụng Gulp.

Tạo một Gulp project

Đầu tiên, chúng ta sẽ tạo ra một thư mục project. Đây sẽ là thư mục gốc của dự án. Di chuyển vào thư mục project và chạy lệnh npm init:

# ... from within our project folder
$ npm init

Lệnh npm init sẽ tạo ra một file package.json lưu trữ các thông tin về project, như các dependencies được sử dụng trong dự án (Gulp là một dependency).

npm init sẽ yêu cầu bạn xác nhận: bạn ấn yes và enter nhé

Khi file package.json đã được tạo, chúng ta có thể cài đặt Gulp vào dự án bằng cách sử dụng lệnh:

$ npm install gulp --save-dev

Lệnh này sẽ cài đặt Gulp vào project của bạn thay vì cài đặt toàn cục.

Cờ --save-dev sẽ thêm gulp như một dev dependency trong package.json.

Nếu kiểm tra thư mục project khi lệnh đã thực thi xong, bạn sẽ thấy có thêm thư mục node_modules. Bạn cũng nhìn thấy thư mục gulp trong node_modules.

Chúng ta gần như đã sẵn sàng để bắt đầu làm việc với Gulp. Nhưng trước khi làm điều đó, chúng ta cần xác định cách chúng ta sử dụng Gulp cho project, và một phần trong đó là chọn một cấu trúc thư mục.

Chọn cấu trúc thư mục

Gulp đủ linh hoạt để làm việc với mọi cấu trúc thư mục. Trong bài viết này, chúng ta sẽ sử dụng một cấu trúc thường thấy:

 |- app/
      |- css/
      |- fonts/
      |- images/ 
      |- index.html
      |- js/ 
      |- scss/
  |- dist/
  |- gulpfile.js
  |- node_modules/
  |- package.json

Trong cấu trúc này, chúng ta sẽ sử dụng thư mục app cho mục đích phát triển, trong khi thư mục dist (distribution) được sử dụng để chứa các file đã được tối ưu cho web site production.

Bây giờ, hãy bắt đầu bằng cách tạo ra Gulp task đầu tiên của bạn trong gulpfile.js, cái lưu trữ tất cả cấu hình của Gulp.

Viết Gulp task đầu tiên

Bước đầu tiên để sử dụng Gulp là require trong gulpfile.

var gulp = require('gulp');

Câu lệnh require nói với Node tìm kiếm trong thư mục node_modules package có tên gulp. Khi package được tìm thấy, chúng ta gán nội dung tới biến gulp.

Bây giờ chúng ta có thể viết một gulp task. Cú pháp cơ bản như sau:

gulp.task('task-name', function() {
  // Stuff here
});

task-name là tên của task, cái sử dụng khi bạn muốn chạy một task trong Gulp. Bạn cũng có thể chạy task đó trong command line bằng lệnh gulp task-name.

Để kiểm tra, tạo một task hello, cái in ra "Hello Zell".

gulp.task('hello', function() {
  console.log('Hello Zell');
});

Chúng ta có thể chạy task với lệnh gulp hello.

$ gulp hello

Lệnh trên sẽ in ra "Hello Zell".

Thực tế, các Gulp task sẽ phức tạp hơn một chút. Nó thường chứa hơn 2 phương thức Gulp, cộng với nhiều plugin của Gulp.

Một task thực sự sẽ giống như thế này:

gulp.task('task-name', function () {
  return gulp.src('source-files') // Get source files with gulp.src
    .pipe(aGulpPlugin()) // Sends it through a gulp plugin
    .pipe(gulp.dest('destination')) // Outputs the file in the destination folder
})

gulp.src nói với Gulp task các file được sử dụng, trong khi gulp.dest nói với Gulp nơi chứa các file kết quả khi task hoàn tất.

Hãy thử xây dựng một task thực sự, biên dịch các file Sass thành CSS.

Kết

Gulp còn có thể build scss qua css, build các file TypeScript to JS , và nhiều vấn đề khác , để hiểu rõ hơn về gulp thì các bạn lên trang chủ của Gulp để tìm hiểu kĩ hơn về nó.