Home » Frontend Developer » Gulp – Tự động các tác vụ cho Frontend Developer

Gulp – Tự động các tác vụ cho Frontend Developer

Gulp là một công cụ giúp bạn tự động hoá nhiều tác vụ trong lập trình web. Giống như Grunt, Gulp là một javascript task runner (không biết dịch sao hehe) và nó sử dụng  code Javascript thuần. Gulp xây dựng hệ thống tự động các tác vụ như nén file CSS hay JS, nối nhiều file lại với nhau, và thông dịch các file SASS sang CSS. 

Tutorial này sẽ hướng dẫn các bạn cách sử dụng gulp để chạy các tác vụ front-end một cách đơn giản và dễ dàng. Sau khi hoàn thành tutorial này, bạn sẽ thấy mình ở cấp độ trung bình về chuyên môn trong việc sử dụng Gulp và từ dó có thể đưa bản thân tới các cấp độ tiếp theo.

#CÀI ĐẶT

Gulp dễ dàng được cài đặt và khởi chạy. Các bước như sau:

  1. Cài đặt Gulp Globally
  2. Cài đặt Gulp trong devDependencies
  3. Khởi tạo file gulpfile.js

Bước đầu tiên đó là cài đặt gulp globally. Mở giao diện command line và gõ lệnh:

Sau đó, bạn sẽ cần cài gulp như một devDependencies trên bất kì dự án nào bạn muốn sử dụng nó. Hãy chắc chắn bạn có file package.json bằng cách tạo thủ công hoặc gõ npm init. Khi đã có package.json, hãy cài đặt gulp vào devDependencies với lệnh:

gulp tutorial

Package sẽ tự động được thêm vào file package.json

Mục đích của việc cài đặt devDependencies đó là nó sẽ tự động thêm các package vào file package.json và lần sau thay vì phải cài đặt từng package riêng biệt thì bạn chỉ cần chạy một lệnh npm install thì các package có trong file package.json sẽ tự động được cài đặt.

Và cuối cùng bạn sẽ cần một file gulpfile.js trong thư mục dự án của bạn. Chúng ta sẽ thêm plugin gulp utilites để có thể xuất thông báo trên màn hình khi gulp hoạt động.

Trong file gulpfile.js mà bạn đã tạo tại bước 3, chúng ta sẽ xuất ra cửa sổ thông báo rằng gulp đang được chạy.

Và nếu mọi thứ như mong đợi thì khi chạy gulp trong cửa sổ command line sẽ cho ra output tương tự như sau.

#TỔNG QUÁT

Cấu trúc thư mục

Đối với tutorial này chúng ta sẽ tạo theo cấu trúc thư mục như sau.

 

source là nơi mà chúng ta sẽ làm việc, và public sẽ là nơi chứa code sau khi được xử lý qua gulp.

Giới thiệu nhanh về Gulp

Gulp API chứ 4 functions quan trọng nhất đó là:

  • gulp.task
  • gulp.src
  • gulp.dest
  • gulp.watch

gulp.task định nghĩa các tác vụ của bạn. 

gulp.src trỏ tới các file chúng ta muốn sử dụng. Nó sử dụng .pipe để dẫn file qua các plugins gulp khác.

gulp.dest trỏ tới thư mục chúng ta muốn viết file sau khi đã được xử lý qua các plugin.

gulp.srcgulp.dest có thể được xử dụng để sao phép file qua vị trí mới như sau:

gulp.watch sẽ được sử dụng để lắng nghe các sự kiện thay đổi tại các file và chạy các task tương ứng.

#SASS to CSS cùng Gulp

Chúng ta có thể thông dịch SASS thành CSS trong Gulp cùng với sự trợ giúp của plugin gulp-sass. Bạn có thể cài đặt gulp-sass vào dự án của bạn bằng cách sử dụng lệnh sau:

Chúng ta sẽ cần cung cấp cho tác vụ sass source file và destination file.

Sau khi chạy gulp sass trong command line, bạn sẽ thấy bất kì file .scss nào có trong thư mục source/styles sẽ được chuyển thành file .css trong thư mục public/styles.

#Globbing trong Node

Globs là các mẫu matching cho các file mà cho phép bạn thêm nhiều file vào gulp.src. Nó giống như regular expressions, nhưng đặc biệt dành cho đường dẫn file.

Khi sử dụng 1 glob, máy tính sẽ kiểm tra tên file và đường dẫn so với các mẫu. Nếu pattern tồn tại, thì file phù hợp.

Trong Gulp có 4 globbing pattern khác nhau:

  1. *.scss: ‘*‘ pattern là một kí tự thay thế mà phù hợp với bất kì pattern nào trong thư mục hiện tại. Trong trường hợp này, chúng ta đang chọn bất kì file kết thúc bằng .scss trong thư mục gốc.
  2. **/*.scss: đây là phiên bản mạnh hơn của * pattern, nó phù hợp với bất kì file nào kết thúc bằng .scss trong thư mục gốc và các thư mục con.
  3. !not-me.scss: ‘!’ chỉ ra rằng Gulp nên không bao gồm pattern. Trong trường hợp này, not-me.scss sẽ được bỏ qua.
  4. *.+(scss|sass): kí hiệu ‘+ và dấu ngoặc đơn ‘()‘  cho phép Gulp kiểm tra nhiều pattern, mỗi pattern được tách biệt bởi kí hiệu ‘|‘. Trong trường hợp này, Gulp sẽ chọn bất kì file nào có đuôi .scss.sass trong thư mục gốc. (to be continue)
Share
Share
Free WordPress Themes - Download High-quality Templates