Gulp là gì?

Tham gia vào dự án mới điều đầu tiên mình nghĩ đến là cần xây dựng một builder cho Frontend web application. Một trong những việc đó là tìm ra một task runner để giảm thiểu các công việc lặp đi lặp lại trong quá trình phát triển website. Mình có tìm hiểu qua một số dự án đang chạy ở Septeni Technology (SepTech) một số sử dụng Grunt JS, nhưng thấy cú pháp của Grunt JS hơi phức tạp không đươc tinh gọn như Gulp, và mình đã quyết định chọn Gulp cho dự án mới này. (Gulp cũng sẽ được mình sử dụng trong suốt cái bài viết về React JS).

I. Gulp là gì?

Gulp là task runner được xây dựng trên nền Node JS, giúp chúng ta tự động hoá các thao tác thường diễn ra trong quá trình phát triên website như: Minify, kiểm tra lỗi Javascript, compile…

II. Cài đặt

Trước tiên bạn cần cài đặt Node JS theo hướng dẫn: https://nodejs.org/en/

Bước tiếp theo chúng ta cần cài đặt Gulp Global (Chúng ta chỉ cần cài một lần trên máy tính của mình):

$ npm install --global gulp

Và cài đặt trong thư mục dự án:

$ npm install --save-dev gulp

III. Sử dụng Gulp

Việc sử dụng Gulp khá đơn giản, để bắt đầu ta tạo file gulpfile.js lưu trong thư mục gốc của dự án, các task sẽ được định nghĩa trong file này.

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

Để chạy file gulpfile.js chúng ta dùng lệnh:

gulp

Mặc định khi chạy gulp command không có tham số, Gulp sẽ ngầm thực thi task default, nếu muốn chạy với một task nào đó, chúng ta dùng cú pháp:

gulp {task_name}

Như ví dụ bên trên bạn có thể thấy, để định nghĩa một task ta có thể sử dụng gulp.task() 

Yêu cầu viết task minify với mục đích minify các file Javascript. Chúng ta cần cài đặt gulp-uglify plugin:

npm install --save-dev gulp-uglify

Cập nhật file gulpfile.js:

var gulp = require('gulp'),
  uglify = require('gulp-uglify');

gulp.task('minify', function () {
    gulp.src('js/*.js')
       .pipe(uglify())
       .pipe(gulp.dest('build'))
});

Sau đó chúng ta dùng lệnh:

gulp minify

Và kiểm tra trong thư mục build, các file javascript đã được minify. Rất đơn giản phải không các bạn?!

Bạn có để ý đến function gulp.src()?, ở đây sẽ định nghĩa điều kiện lọc các files cho một task, chúng ta có thể xem các quy tắc dưới đây:

• js/app.js tìm chính xác file.
• js/*.js tìm kiếm tất các file kết thúc bằng `.js và nằm trong thư mục js.
• js/**/*.js tìm kiếm tất cả các file kết thúc bằng .js ở trong thư mục js/ và tất cả thư mục con của nó.
• !js/app.js tìm kiếm tất cả các file trong thư mục ngoại trừ file app.js
• *.+(js|css) tìm kiếm tất cả các file trong thư mục root có đuôi là .js và .css.

Rất dễ hiểu, cũng có thể kết hợp nhiều điều kiện bằng cách đưa vào mảng:

gulp.src(['js/*.js', '!js/**/*.min.js'])

IV. Watching files

Trong bài viết này mình không định nói toàn bộ về Gulp, mình chỉ dừng lại ở việc giới thiệu và đưa ra một vài ví dụ thú vị để chứng mình là Gulp hữu ích như thế nào.

Một trong những đặc tính nổi bât là Gulp có khả năng theo dõi kiểm soát sự thay đổi của các file trong dự án, và có thể chạy các task được quy định khi có sự thay đổi ở các file này, đồng thơi tự động reload lại trình duyệt mà không cần làm bất kỳ thao tác gì.

gulp.task('watch', function () {
    gulp.watch('js/*.js', ['minify']);
});

Như ví dụ bên trên, khi có sự thay đổi ở các file javascript trong thư mục js, Gulp sẽ tự động chạy task minify.

Để Gulp có thể tự động reload lại trình duyệt khi có sự thay đổi chúng ta cần cài đặt module BrowserSync

npm install browser-sync --save-dev

Để sử dụng BowerSync thực hiện khai báo trong gulpfile.js

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

Ví dụ:

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

gulp.task('browser-sync', function () {
    var files = [
        '*.html',
        'js/*.js'
    ];

    browserSync.init(files, {
        server: {
            baseDir: '.'
        }
    });
});

Chạy gulp browser-sync để khởi tạo một server mới trong thư mục hiện hành và kiểm soát tất cả sự thay đổi của file html và js trong thư mục js.

Sau khi khởi động server cần sử dụng watch để theo dõi sự thay đổi và thực hiện reload lại trình duyệt:

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

Chúng ta có file gulpfile.js hoàn chỉnh như sau:

var gulp = require('gulp'),
    browserSync = require('browser-sync'),
    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);
});

Chạy lệnh:

gulp serve

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

Bây giờ hãy thử sửa một trong các file html hoặc js, bạn sẽ thấy trình duyệt đang mở sẽ tự động refresh và cập nhật những thay đổi.

V. Tổng kết

Như vậy chúng ta thấy được Gulp tiện lợi, giúp tăng năng xuất cho lập trình viên. Với các web application sử dụng nhiều JS và CSS như Angular JS hay React JS thì Gulp càng bộc lộ được thế mạnh của mình. Chúng ta sẽ cùng tìm hiểu sâu hơn về Gulp trong loạt bài về React JS nhé.

VI.Tài liệu tham khảo

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