Tìm hiểu về Gulp.js

Giới thiệu

Gulp là một công cụ giúp tự động hóa nhiều nhiệm vụ trong quá trình phát triển web. Đây thường được sử dụng để xử lý các tác vụ front-end như:

• Tạo một máy chủ web.
• Tự động làm mới trình duyệt khi lưu tập tin.
• Sử dụng preprocessor như Sass hoặc LESS.
• Tối ưu hóa tài nguyên như CSS, JavaScript và hình ảnh.

Gulp sử dụng nguyên tắc “convention over configuration” trong việc thiết lập dự án. Điều này giúp chuẩn hóa cấu trúc thư mục và đặt các tệp CSS, JavaScript một cách dễ dàng. Dưới đây là một ví dụ về cấu trúc dự án sử dụng Gulp.js:

- app/
  - css/
  - fonts/
  - images/
  - index.html
  - js/
  - scss/
- dist/
- gulpfile.js
- node_modules/
- package.json

Cải thiện quy trình phát triển với Gulp.js

Khi kết thúc bài viết này, bạn sẽ có một quy trình làm việc để thực hiện các tác vụ sau:

• Tạo máy chủ web.
• Biên dịch Sass thành CSS.
• Tự động làm mới trình duyệt khi lưu tập tin.
• Tối ưu hóa tài nguyên (CSS, JS, fonts, và hình ảnh) cho phiên bản sản xuất.

Cài đặt

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

Bước tiếp theo là cài đặt Gulp Global trên máy tính của bạn:

$ sudo npm install gulp -g

Lưu ý: Chỉ cần sử dụng từ khóa sudo trên Mac.

Sau khi cài đặt xong, kiểm tra phiên bản Gulp bằng lệnh:

$ gulp -v

Sử dụng Gulp

Sử dụng Gulp rất đơn giản. Bạn chỉ cần tạo tệp gulpfile.js trong thư mục gốc của dự án và định nghĩa các nhiệm vụ trong tệp này.

var gulp = require('gulp');

gulp.task('default', function(){
  // Mã cho nhiệm vụ mặc định
});

Để chạy gulpfile.js, sử dụng lệnh:

gulp

Gulp sẽ ngầm thực thi nhiệm vụ mặc định. Nếu muốn chạy một nhiệm vụ cụ thể, sử dụng cú pháp:

gulp {tên_nhiệm_vụ}

Ví dụ, để định nghĩa nhiệm vụ minify để nén các tệp JavaScript, cần cài đặt plugin gulp-uglify:

$ npm install -save-dev gulp-uglify

Cập nhật tệp gulpfile.js:

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

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

Sau đó, chạy lệnh:

gulp minify

Kiểm tra thư mục build để xem các tệp JavaScript đã được nén. Rất đơn giản phải không?

Biên dịch SASS

Để biên dịch Sass, cần cài đặt gói gulp-sass:

$ npm i -save-dev gulp-sass

Tiếp theo, định nghĩa một nhiệm vụ mới trong tệp gulpfile.js:

var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
  return gulp.src('path/style.scss')
    .pipe(sass())
    .pipe(gulp.dest(''));
});

Chạy lệnh gulp sass để biên dịch từ tệp scss sang tệp css.

Theo dõi thay đổi tệp

Gulp cho phép theo dõi sự thay đổi của các tệp trong dự án và chạy các nhiệm vụ tương ứng khi có sự thay đổi đó. Đồng thời, Gulp sẽ tự động làm mới trình duyệt mà không cần thao tác bất kỳ điều gì.

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

Trong ví dụ trên, khi có sự thay đổi trong các tệp JavaScript trong thư mục js, Gulp sẽ tự động chạy nhiệm vụ minify.

Để Gulp tự động làm mới trình duyệt, cần cài đặt module BrowserSync:

$ npm install browser-sync -save-dev

Khai báo trong tệp gulpfile.js:

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

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

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

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

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

Chạy lệnh gulp browser-sync để khởi tạo máy chủ web mới và theo dõi các thay đổi trong các tệp html và js trong thư mục js.

Sau khi khởi động máy chủ web, sử dụng watch để theo dõi các thay đổi và tự động làm mới trình duyệt:

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

Các gói hữu ích khác

Dưới đây là một số gói mà tôi thường sử dụng cùng với Gulp để xử lý các tác vụ hiệu quả hơn. Đây không phải là những gói tốt nhất, bạn có thể đề xuất gói nào tốt hơn cho mọi người tham khảo.

• gulp-rename: Để đổi tên các tệp nguồn.
• gulp-cssnano: Để nén CSS.
• gulp-concat: Để ghép nội dung các tệp.
• gulp-less: Để biên dịch Less thành CSS.
• gulp-uglify: Để nén JavaScript với UglifyJS2.

Kết luận

Gulp là một công cụ tiện lợi giúp tăng năng suất cho lập trình viên. Đối với các ứng dụng web sử dụng nhiều JavaScript và CSS như AngularJS hoặc ReactJS, Gulp càng trở nên hữu ích.

Tham khảo

• https://github.com/gulpjs/gulp
• https://github.com/gulpjs/gulp/tree/master/docs
• https://labs.septeni-technology.jp/none/gulp-la-gi/
• https://css-tricks.com/gulp-for-beginners/