Các yêu cầu của GulpJS

Để cài đặt GulpJS, bạn cần có sẵn trên máy NodeJS bằng cách vào website và cài bản mới nhất. Nên chọn bản “stable” để đỡ xung đột với một số package khi sử dụng.

Cài đặt GulpJS như thế nào?

• Bước 1: Bạn cần cài đặt NodeJS và đảm bảo trên Terminal/Cmd bạn có thể nhập câu lệnh npm.
• Bước 2: Cài đặt GulpJS bằng câu lệnh: npm install -g gulp gulp-cli

GulpJS API

Để sử dụng GulpJS, ta cần biết các thành phần API. Các phương thức API cho phép bạn thực hiện các công việc với Gulp. Dưới đây là giới thiệu nhanh về các phương thức này:

gulp.task – Xác định một tác vụ, tương tự như bạn ra lệnh cho gulp bắt đầu làm gì đó.

gulp.task('do-something', () => {
  // Do something
});

gulp.src – Đọc nguồn của file hoặc nhiều file.

 gulp.src('src/templates/*.html')

gulp.dest – Ghi file đã xử lý ra một thư mục được chỉ định.

gulp.src('src/templates/*.jade')
 .pipe(jade())
 .pipe(minify())
 .pipe(gulp.dest('dest/'));

gulp.src('src/js/**/*.js', { base: 'client' })
 .pipe(minify())
 .pipe(gulp.dest('dest')); // Writes 'dest/js/somedir/somefile.js'

gulp-watch – Theo dõi file và làm gì đó nếu file thay đổi.

gulp.watch('src/js/**/*.js', function(event) {
 console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });

Sau khi đã nắm được các phương thức sử dụng GulpJS API cơ bản, giờ ta hãy chuyển qua phần cài đặt gulp trên một project ví dụ xem sao.

Thiết lập cài đặt và sử dụng GulpJS trong project

Về cơ bản, để GulpJS bắt đầu làm việc, bạn cần tạo 1 file tên gulpfile.js đặt trong thư mục của project.

Nếu là giao diện WordPress, bạn cần đặt vào wp-content/themes/<tên giao diện> nhé.

Hãy bắt đầu bằng cách thực hiện như sau:

Bước 1: Thiết lập package.json

Nếu bạn chưa thấy có file package.json (tức là project chưa sẵn sàng với npm), ta cần cài đặt nó bằng câu lệnh sau:

npm init

Cứ nhập enter cho tới khi cài đặt hoàn tất. Ta sẽ tìm hiểu vụ npm này vào trong một bài viết cụ thể khác.

Bước 2: Cài đặt gulp package trong project

Ta chạy tiếp dòng lệnh:

npm install --save-dev gulp

Xác định task đầu tiên của gulp

Sau đó, trong file gulpfile.js, ta có thể sử dụng gulp như sau:

var gulp = require('gulp');
gulp.task('test', function(){
  console.log('This is a test. Now, run it');
});

Kiểm tra task test trong GulpJS

Giờ, hãy thử kiểm tra xem gulp đã hoạt động chưa bằng cách gõ lệnh trên 1 Terminal mới cùng project:

gulp test

Nếu bạn thấy thông báo như trong console.log ta vừa nhập hiện ra, xin chúc mừng, bạn đã tạo xong 1 task đầu tiên với GulpJs.

Ví dụ thực tế sử dụng GulpJS

Trong bài chia sẻ giao diện WordPress Ebook miễn phí, mình có cung cấp link Github chứa toàn bộ source. Project này chứa file gulpfile.js nên ta hãy cùng tìm hiểu mình đã sử dụng GulpJS như thế nào nhé?

Các package cài đặt

Hãy cùng điểm qua các package mà ta sẽ cài đặt. Bạn lưu ý là gulp có một thư viện khá nhiều các plugin để sử dụng do các lập trình viên chia sẻ, tạo nên sự mạnh mẽ của công cụ này.

• gulp-sass – Compile (chuyển) code SCSS sang CSS.
• gulp-sourcemaps – Cho phép truy vấn trên trình duyệt file SCSS nào để debug style.
• gulp-rename – Đổi tên file
• gulp-uglify – Tối ưu file Javascript
• gulp-concat – Gộp nhiều file Javascript thành một file
• gulp-livereload – Sử dụng cùng plugin trình duyệt LiveReload để tự động load element trên trình duyệt khi CSS có thay đổi.

Cài đặt các package lần lượt:

npm install --save-dev gulp-sass

Hoặc tất cả cùng một lúc:

npm install --save-dev gulp-sass gulp-sourcemaps gulp-rename gulp-uglify gulp-concat

Gợi ý: cách tốt nhất để sử dụng các package thư viện này là bạn nên vào đọc trong NpmJS nhé. Dưới đây là các ví dụ mà project giao diện Ebook miễn phí đã sử dụng để bạn tham khảo thêm. Lưu ý là bạn cần tính đến cách sắp xếp các thư mục sao cho hợp lý nữa nhé.

Sau đó, trong gulpfile.js bạn xác định các package này như variable:

Xử lý SCSS thành CSS

Ta chia thành 2 tình huống: khi ta dev (trên local hoặc trên một site demo), và khi ta build trên production site.

Khi dev thì ta cần debug và biết cần sửa file nào nên cần thêm các thông báo lỗi và sourcemap vào:

Trên production site, ta không cần sourcemap và output error ra nữa. Chỉ đơn thuần là compile và minify CSS đầu ra:

Xử lý file Javascript

Cũng tương tự, ta có thể chia ra làm dev và production case. Tuy nhiên mình hơi lười nên gộp chung vào làm một, dùng cả cho khi build dev và production:

Watch file trong GulpJS

Bước này mới quan trọng, muốn GulpJS tự động thì ta nên có 1 task watch các file thay đổi để tự động chạy các tác vụ mà ta đã dùng, tránh việc ta phải bỏ dòng lệnh chạy đi chạy lại. Trong trường hợp này, mình gọi cả livereload() để nó tự động làm mới trình duyệt khi cần.

Cuối cùng, ta cần gộp thành 2 task

Task default sẽ làm nhiệm vụ khi dev (chỉ cần gõ gulp là chạy luôn). Task build sẽ làm nhiệm vụ khi chuẩn bị đẩy code lên production.

gulp.task('build', ['build-styles', 'build-scripts']);
gulp.task('default', ['styles', 'scripts', 'watch']);

Thư viện plugin của GulpJS

Như mình đã nói, GulpJS rất may mắn có được nhiều developer sử dụng. Bạn có thể tận dụng lợi thế này bằng cách vào thư viện để tìm cách plugin nào phù hợp nhu cầu sử dụng của bạn.

Một số package khác có vẻ hữu ích:

• gulp-imagemin – Nén ảnh
• gulp-htmlclean – Nén file HTML
• gulp-strip-debug – Gỡ bỏ hết các câu lệnh debug như console và  debugging

Một số case tình huống sử dụng GulpJS khác

• Browserify builds with Watchify
• Templating with Swig and YAML front-matter
• Deleting files and folders before running builds

Bạn có thể xem toàn bộ các cách sử dụng GulpJS ở đây.