Làm quen với gulp: Tạo auto refresh HTTP server

Gulp là gì?

Gulp là một task runner giúp chúng ta tự động hoá một số thao tác thường gặp trong quá trình làm việc, ví dụ: làm server auto reload, compile và kiểm lỗi các file javascript, minify các file javascript để đưa lên môi trường production,...

Gulp khá giống với batch/bash script trên Windows và Unix/Linux/Mac. Tuy nhiên, Gulp hoạt động trên môi trường node.js nên còn có thể tận dụng được nguồn plugin vô tận và mạnh mẽ của cộng đồng node.js.

Cài đặt

Để sử dụng Gulp. Máy tính cần phải có node.js và npm.

Ta cần cài đặt Gulp thông qua npm ở cả global:

npm install -g gulp gulp-cli

và trong thư mục của dự án:

npm install gulp --save-dev

Bước cài đặt global chỉ cần làm 1 lần duy nhất trên 1 máy tính. Còn bước cài đặt trong thư mục dự án thì bắt buộc cài khi tạo một dự án mới.

Gulpfile.js

Như đã nói, cách cài đặt và cấu hình Gulp rất đơn giản. Để sử dụng Gulp trong một dự án, bạn chỉ cần tạo ra file gulpfile.js và lưu trong thư mục gốc.

Nội dung một fil gulpfile.js cơ bản nhất như sau:

var gulp = require('gulp');

gulp.task('default', function(){
   // Default task code
});

Và để chạy file gulp này, chúng ta chạy lệnh sau trong cửa sổ terminal/command line:

gulp

Giải thích về cơ chế hoạt động của Gulp

Một file Gulp chia thành từng task, và được định nghĩa bằng khối lệnh:

gulp.task('tên-task', function() {
   // xử lý task 
});

Mặc định khi chạy lệnh gulp trong terminal/command line không kèm theo tham số nào (như ví dụ trên), gulp sẽ tự động chạy task mặc định là default.

Khi muốn chạy một task cụ thể nào đó, ta gõ lệnh:

gulp tên-task

Sử dụng Gulp làm auto refresh server

Trong khuông khổ của bài viết này, không thể giới thiệu hết toàn bộ về Gulp được, thay vào đó, chúng ta sẽ cùng làm một ứng dụng đơn giản nhưng rất hữu ích, đó là xây dựng một server auto refresh.

Ứng dụng này có chức năng tự động refresh lại trình duyệt ngay sau khi bạn sửa đổi các file javascript, css hay html trong dự án.

Đầu tiên, chúng ta cần cài đặt module BrowserSync, đây là module dùng để thực hiện việc refresh lại các trình duyệt đang mở, đồng bộ khi scroll, form,...

npm install browser-sync --save-dev

Sau đó tạo file gulpfile.js với nội dung giống với ví dụ mẫu ở trên.

Tiếp đến, ta khai báo sử dụng gói BrowserSync cho chương trình:

var browserSync = require('browser-sync');

Và tạo ra một task mới, đặt tên là serve:

gulp.task('serve', [], function () {

});

Trong task này, chúng ta tiến hành khởi động server:

browserSync({
    notify: false,
    server: {
         baseDir: '.'
    }
});

Câu lệnh trên khởi động một web server đơn giản và chạy ở địa chỉ mặc định là http://localhost:3000, với thư mục root là ngay tại thư mục hiện hành của file gulpfile.js

Sau khi khởi động server, việc tiếp theo sẽ là watch (theo dõi) các file javascript, css và html (hoặc bất kì file nào bạn muốn), khi có bất kì thay đổi nào trên các file này thì gọi lệnh browserSync.reload để refresh trình duyệt đang mở.

gulp.watch(['*.html'], browserSync.reload);
gulp.watch(['js/*.js'], browserSync.reload);
gulp.watch(['css/*.css'], browserSync.reload);

Và đây là file gulpfile.js hoàn chỉnh:

var gulp = require('gulp');
var browserSync = require('browser-sync');
var reload = browserSync.reload;

gulp.task('default', [], function () {
    console.log("Command:
   serve - run live reload server");
});

gulp.task('serve', [], function () {
    browserSync({
        notify: false,
        server: {
            baseDir: '.'
        }
    });

    gulp.watch(['*.html'], reload);
    gulp.watch(['js/*.js'], reload);
    gulp.watch(['css/*.css'], reload);
});

Để chạy file gulp này, chúng ta gõ lệnh:

gulp serve

Trình duyệt sẽ tự bật lên với địa chỉ http://localhost:3000

Bây giờ, bạn thử sửa một file html hoặc javscript, css bất kì, và lưu lại, các trình duyệt đang mở sẽ tự động refresh lại và cập nhật thay đổi đó ngay lập tức.

Trên đây chỉ là một ví dụ đơn giản cho việc ứng dụng lệnh watch của gulp. Ngoài ra bạn nên tham khảo thêm tài liệu của Gulp tại đây:

https://github.com/gulpjs/gulp/tree/master/docs