Giới thiệu về Gulp JS

Bài viết được sự cho phép của tác giả Tino Phạm

1. Gulp là cái gì vậy?

Gulp được biết đến như là một Task Runner, nghĩa là nó sẽ thực hiện các nhiệm vụ mà developer đặt ra cho nó một cách tự động.
OK, ví dụ  thế này nhé: bạn đang tham gia một dự án web và trong quá trình phát triển dự án bạn muốn là: mỗi khi bạn chỉnh sửa các file html, css, hoặc là js gì bạn sẽ không cần phải nhấn F5 (refresh) browser cho mất công nữa, bạn cũng muốn minify các file css và js khi bạn release package, và bạn còn muốn làm nhiều thứ khi phát triển dự án của mình. Vậy Gulp sẽ giúp bạn định nghĩa các tasks và tự động thực hiện các tasks đó cho bạn.
Lợi ích của Gulp là: giúp bạn tự động minify, complile, reload browser,… và nhiều thứ khác rất hay nữa.

  10 Công ty hàng đầu thế giới sử dụng Node.js
  8 lợi thế khi sử dụng Polymer so với Angular và React

2. Hướng dẫn cài đặt

Gulp hoạt động  trên môi trường Nodejs nên việc đầu tiên là bạn phải cài đặt Node.js và npm
– Download và cài đặt Node.js tại đây. Cài Node.js bao gồm cả npm.
– Mở hộp thoại cmd trong window và gõ lệnh: npm install gulp -g
Vậy là xong việc cài đặt Gulp rồi.
Giải thích lệnh trong npm: npm có 3 loại install
– install -g: là global, như thế e có thể truy cập tới package vừa cài ở bất kì đâu trong hệ thống
– install –save: là khi install, đồng thời save lại tên package đó vào package.json ở trường dependencies, thường dùng nếu package đó cần dùng cho product lúc runtime (ví dụ như cài các gói: express, socket.io,..)
– install –save-dev: là khi install, cũng save vô package.json nhưng ở trường dev-dependencies, ý nói tới các package mà e chỉ cần lúc development thôi chứ lên môi trường production thì ko cần nữa, ví dụ như gulp hay webpack, nodemon,…

3. Hướng dẫn sử dụng Gulp

Bạn tạo một file tên là gulpfile.js trong thự mục gốc của dự án. Nội dung cơ bản như sau:

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

– Để chạy file gulp này, bạn mở command line/terminal và gõ lệnh: gulp
– Bạn cũng có thể tạo nhiều tasks mới tương tự code tạo task ‘default’ và chỉ cần đổi tên ‘default’ thành tên task của bạn. ví dụ:

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

4. Gulp làm việc thế nào?

Một file gulp được 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

5. Sử dụng Gulp để tạo server ảo và tự động refresh server

Việc này có nghĩa là gulp sẽ tự động refresh lại trình duyệt ngay sau khi bạn có  bất cứ thay đổi nào với các file javascript, html hay css trong dự án của bạn.

Để làm được việc này, chúng ta cần cài đặt BrowserSync. Đây là module dùng để thực hiện việc refresh browser đang mở, đồng bộ scroll, form,…

Mở command line/terminal và gõ lệnh: npm install browser-sync –save-dev

Tiếp theo, tạo file gulpfile.js như các ví dụ trên.

Sau đó, mở gulpfile.js và thêm code sau:

var browserSync = require(‘browser-sync’);

Tạo một task mới với tên là ‘detect-changed’ theo cú pháp:

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:port, 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(“reload server”);
});

gulp.task(‘detect-changed’, [], 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:port

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
http://labs.septeni-technology.jp/none/gulp-la-gi/
https://techmaster.vn/posts/34204/gulp-cho-nguoi-moi-bat-dau

Bài viết gốc được đăng tải tại thangphampt.wordpress.com

Có thể bạn quan tâm:

Xem thêm Việc làm Developer hấp dẫn trên TopDev