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

Huy Trần viết ngày 23/05/2015

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.jsnpm.

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:\n   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

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Huy Trần

115 bài viết.
1763 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
167 46
Tại sao phải viết blog kĩ thuật? Có rất nhiều bài viết trên mạng nói về vấn đề tại sao một lập trình viên nên thường xuyên viết các bài blog kĩ thu...
Huy Trần viết hơn 3 năm trước
167 46
White
151 39
(Ảnh) Tiếp tục sêri (Link) lần này, chúng ta sẽ cùng tìm hiểu và mô phỏng lại một chức năng mà mọi người đang bắt đầu sử dụng hằng ngày, đó là chứ...
Huy Trần viết hơn 2 năm trước
151 39
White
108 17
Phần 1: Tự truyện Tui và Toán đã từng là hai kẻ thù không đội trời chung trong suốt hơn mười lăm năm ròng rã. Ngay từ ánh nhìn đầu tiên đã ghét nh...
Huy Trần viết hơn 2 năm trước
108 17
Bài viết liên quan
White
50 8
Tăng sức mạnh cho javascript với lodash Lần này mình sẽ giới thiệu 1 thư viện javascript vô cùng bá đạo có tên là "lodash]1]", có thể nói nó là LI...
Huy Hoàng Phạm viết gần 3 năm trước
50 8
White
33 8
Lâu không post gì muốn viết một bài dài dài về js cơ mà đau đầu quá viết mãi không xong, thôi post bài ngắn vậy :smiley: Lấy screen size ở đây tôi...
Hoàng Duy viết 3 năm trước
33 8
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
115 bài viết.
1763 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!