Gulp là gì và Hướng dẫn tự động hóa SCSS sang CSS cho người mới bắt đầu

Gulp là một công cụ tự động hóa tác vụ mạnh mẽ, giúp đơn giản hóa quy trình phát triển web. Đặc biệt, nó được sử dụng rộng rãi trong việc xử lý các tác vụ front-end như tạo web server, tự động làm mới trình duyệt, sử dụng preprocessor như Sass hoặc LESS, và tối ưu hóa tài nguyên. Bài viết này sẽ cung cấp kiến thức cơ bản về Gulp và hướng dẫn cách sử dụng nó để chuyển đổi SCSS sang CSS một cách tự động.

Gulp là gì?

Gulp là một công cụ xây dựng (task runner) dựa trên Node.js, được sử dụng để tự động hóa các tác vụ lặp đi lặp lại trong quá trình phát triển web. Nó giúp tiết kiệm thời gian và công sức bằng cách tự động thực hiện các công việc như biên dịch mã, tối ưu hóa hình ảnh, và làm mới trình duyệt. Với Gulp, bạn có thể tạo quy trình làm việc tùy chỉnh phù hợp với nhu cầu của dự án.

Những gì chúng ta sẽ làm

Trong bài viết này, chúng ta sẽ cùng nhau xây dựng một quy trình làm việc đơn giản với Gulp để thực hiện các tác vụ sau:

  • Khởi tạo một web server để phát triển.
  • Biên dịch các file Sass thành CSS.
  • Tự động làm mới trình duyệt khi có thay đổi trong file.

Bên cạnh đó, bạn cũng sẽ được hướng dẫn cách kết hợp các tác vụ khác nhau thành một lệnh duy nhất, giúp quy trình làm việc trở nên hiệu quả hơn.

Cài đặt Gulp

Trước khi bắt đầu, bạn cần đảm bảo đã cài đặt Node.js và npm (Node Package Manager) trên máy tính của mình. Nếu chưa, bạn có thể tải và cài đặt từ trang chủ của Node.js.

Sau khi đã cài đặt Node.js và npm, bạn có thể cài đặt Gulp bằng lệnh sau:

npm install --global gulp-cli

Lệnh này sẽ cài đặt Gulp CLI (Command Line Interface) một cách toàn cục, cho phép bạn sử dụng lệnh gulp từ bất kỳ thư mục nào trên máy tính.

Hướng dẫn sử dụng Gulp để chuyển đổi SCSS sang CSS

Dưới đây là các bước chi tiết để cấu hình Gulp cho việc chuyển đổi SCSS sang CSS:

Bước 1: Khởi tạo dự án

Đầu tiên, tạo một thư mục dự án mới và chuyển đến thư mục đó trong terminal. Sau đó, chạy lệnh sau để khởi tạo một dự án Node.js mới:

npm init -y

Lệnh này sẽ tạo một file package.json mặc định trong thư mục dự án.

Bước 2: Cài đặt các gói (package) cần thiết

Tiếp theo, bạn cần cài đặt các gói Gulp và các plugin cần thiết cho việc biên dịch SCSS. Chạy lệnh sau để cài đặt:

npm install --save-dev gulp gulp-sass sass

Giải thích các gói:

  • gulp: Gói Gulp chính.
  • gulp-sass: Plugin Gulp để biên dịch Sass.
  • sass: Thư viện biên dịch Sass.

Bước 3: Tạo file gulpfile.js

Tạo một file có tên gulpfile.js trong thư mục gốc của dự án. Đây là nơi bạn sẽ định nghĩa các tác vụ Gulp của mình.

Bước 4: Viết code cho gulpfile.js

Mở file gulpfile.js và thêm đoạn code sau:

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));

// Định nghĩa tác vụ biên dịch Sass
function style() {
  return gulp.src('sass/**/*.scss') // Nguồn file SCSS
    .pipe(sass().on('error', sass.logError)) // Biên dịch SCSS sang CSS
    .pipe(gulp.dest('./css')); // Nơi lưu file CSS
}

// Định nghĩa tác vụ theo dõi thay đổi file
function watch() {
  gulp.watch('sass/**/*.scss', style); // Theo dõi các file SCSS và chạy tác vụ style khi có thay đổi
}

// Xuất các tác vụ để có thể chạy từ command line
exports.style = style;
exports.watch = watch;

Trong đoạn code này:

  • Chúng ta import các module gulp và gulp-sass.
  • Hàm style định nghĩa tác vụ biên dịch SCSS sang CSS. Nó lấy tất cả các file .scss trong thư mục sass và các thư mục con, biên dịch chúng bằng plugin gulp-sass, và lưu kết quả vào thư mục css.
  • Hàm watch định nghĩa tác vụ theo dõi các file SCSS. Khi có bất kỳ thay đổi nào trong các file SCSS, nó sẽ tự động chạy tác vụ style để biên dịch lại CSS.
  • Cuối cùng, chúng ta xuất các hàm style và watch để có thể chạy chúng từ command line.

Bước 5: Tạo thư mục sass và file SCSS

Tạo một thư mục có tên sass trong thư mục gốc của dự án. Bên trong thư mục sass, tạo một file SCSS, ví dụ: style.scss. Bạn có thể viết bất kỳ đoạn mã SCSS nào trong file này.

Bước 6: Chạy các tác vụ Gulp

Mở terminal và chuyển đến thư mục gốc của dự án. Sau đó, chạy lệnh sau để chạy tác vụ style:

gulp style

Lệnh này sẽ biên dịch tất cả các file SCSS trong thư mục sass và tạo ra các file CSS tương ứng trong thư mục css.

Để chạy tác vụ watch và tự động biên dịch SCSS khi có thay đổi, chạy lệnh sau:

gulp watch

Bây giờ, mỗi khi bạn thay đổi và lưu một file SCSS, Gulp sẽ tự động biên dịch lại CSS.

Cấu trúc dự án

Để dễ hình dung, đây là cấu trúc dự án sau khi thực hiện các bước trên:

├── css/
├── node_modules/
├── sass/
│   └── style.scss
├── gulpfile.js
└── package.json

Cấu trúc thư mục dự án Gulp với SCSSCấu trúc thư mục dự án Gulp với SCSS

Tổng kết

Như vậy là bạn đã hoàn thành việc cấu hình Gulp để tự động chuyển đổi SCSS sang CSS. Đây chỉ là một ví dụ đơn giản, và Gulp có thể làm được nhiều hơn thế. Bạn có thể tìm hiểu thêm về Gulp và các plugin khác để tùy chỉnh quy trình làm việc của mình theo nhu cầu cụ thể.

Chúc bạn thành công!