GulpJS toàn tập cài đặt từ A đến Z cho developer

Rate this post

GulpJS là công cụ quản lý tác vụ bằng Javascript giúp bạn tự động hoá một số quá trình khi dev. Vậy bạn có biết cách sử dụng GulpJS chưa? Bài viết này sẽ hướng dẫn chi tiết để bạn làm quen với nó.

GulpJS là gì?

Như đã nói, đây là một công cụ được viết trên nền Javascript và thương làm việc trong môi trường NodeJS. Nó có thể làm khá nhiều thao tác tự động, chẳng hạn như nén Javascript và CSS file, tự động làm mới trình duyệt khi có file được sửa, tối ưu và chuyển đổi các CSS preprocessor như SASS/SCSS hay Less, nén ảnh,… GulpJS chính là lời giải cho những công việc có tính chất lặp đi lặp trong quá trình dev project.

GulpJS là công cụ build giúp bạn thoát khỏi mớ việc quen thuộc. Một khi bạn đã cài đặt xong GulpJS, nó tự động hoá và giúp bạn tập trung vào code mà thôi.

Cài đặt GulpJS

[sociallocker]

Các yêu cầu của GulpJS

Để cài đặt GulpJS, bạn cần có sẵn trên máy NodeJS bằng cách vào website và cài bản mới nhất. Nên chọn bản “stable” để đỡ xung đột với một số package khi sử dụng.

Cài đặt GulpJS như thế nào?

Bước 1: Bạn cần cài đặt NodeJS và đảm bảo trên Terminal/Cmd bạn có thể nhập câu lệnh npm.
Bước 2: Cài đặt GulpJS bằng câu lệnh: npm install -g gulp gulp-cli

GulpJS API

Để sử dụng GulpJS, ta cần biết các thành phần API. Các phương thức API cho phép bạn thực hiện các công việc với Gulp. Dưới đây là giới thiệu nhanh về các phương thức này:

gulp.task – Xác định một tác vụ, tương tự như bạn ra lệnh cho gulp bắt đầu làm gì đó.

gulp.task('do-something', () => {
  // Do something
});

gulp.src – Đọc nguồn của file hoặc nhiều file.

 gulp.src('src/templates/*.html')

gulp.dest – Ghi file đã xử lý ra một thư mục được chỉ định.

gulp.src('src/templates/*.jade')
 .pipe(jade())
 .pipe(minify())
 .pipe(gulp.dest('dest/'));

gulp.src('src/js/**/*.js', { base: 'client' })
 .pipe(minify())
 .pipe(gulp.dest('dest')); // Writes 'dest/js/somedir/somefile.js'

gulp-watch – Theo dõi file và làm gì đó nếu file thay đổi.

gulp.watch('src/js/**/*.js', function(event) {
 console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
 });

Sau khi đã nắm được các phương thức sử dụng GulpJS API cơ bản, giờ ta hãy chuyển qua phần cài đặt gulp trên một project ví dụ xem sao.

Thiết lập cài đặt và sử dụng GulpJS trong project

Về cơ bản, để GulpJS bắt đầu làm việc, bạn cần tạo 1 file tên gulpfile.js đặt trong thư mục của project.

Nếu là giao diện WordPress, bạn cần đặt vào wp-content/themes/<tên giao diện> nhé.

Hãy bắt đầu bằng cách thực hiện như sau:

Bước 1: Thiết lập package.json

Nếu bạn chưa thấy có file package.json (tức là project chưa sẵn sàng với npm), ta cần cài đặt nó bằng câu lệnh sau:

npm init

Cứ nhập enter cho tới khi cài đặt hoàn tất. Ta sẽ tìm hiểu vụ npm này vào trong một bài viết cụ thể khác.

Bước 2: Cài đặt gulp package trong project

Ta chạy tiếp dòng lệnh:

npm install --save-dev gulp

Xác định task đầu tiên của gulp

Sau đó, trong file gulpfile.js, ta có thể sử dụng gulp như sau:

var gulp = require('gulp');
gulp.task('test', function(){
  console.log('This is a test. Now, run it');
});

Kiểm tra task test trong GulpJS

Giờ, hãy thử kiểm tra xem gulp đã hoạt động chưa bằng cách gõ lệnh trên 1 Terminal mới cùng project:

gulp test

Nếu bạn thấy thông báo như trong console.log ta vừa nhập hiện ra, xin chúc mừng, bạn đã tạo xong 1 task đầu tiên với GulpJs.

Ví dụ thực tế sử dụng GulpJS

Trong bài chia sẻ giao diện WordPress Ebook miễn phí, mình có cung cấp link Github chứa toàn bộ source. Project này chứa file gulpfile.js nên ta hãy cùng tìm hiểu mình đã sử dụng GulpJS như thế nào nhé?

Các package cài đặt

Hãy cùng điểm qua các package mà ta sẽ cài đặt. Bạn lưu ý là gulp có một thư viện khá nhiều các plugin để sử dụng do các lập trình viên chia sẻ, tạo nên sự mạnh mẽ của công cụ này.

gulp-sass – Compile (chuyển) code SCSS sang CSS.
gulp-sourcemaps – Cho phép truy vấn trên trình duyệt file SCSS nào để debug style.
gulp-rename – Đổi tên file
gulp-uglify – Tối ưu file Javascript
gulp-concat – Gộp nhiều file Javascript thành một file
gulp-livereload – Sử dụng cùng plugin trình duyệt LiveReload để tự động load element trên trình duyệt khi CSS có thay đổi.

Cài đặt các package lần lượt:

npm install --save-dev gulp-sass

Hoặc tất cả cùng một lúc:

npm install --save-dev gulp-sass gulp-sourcemaps gulp-rename gulp-uglify gulp-concat

Gợi ý: cách tốt nhất để sử dụng các package thư viện này là bạn nên vào đọc trong NpmJS nhé. Dưới đây là các ví dụ mà project giao diện Ebook miễn phí đã sử dụng để bạn tham khảo thêm. Lưu ý là bạn cần tính đến cách sắp xếp các thư mục sao cho hợp lý nữa nhé.

Sau đó, trong gulpfile.js bạn xác định các package này như variable:

Xử lý SCSS thành CSS

Ta chia thành 2 tình huống: khi ta dev (trên local hoặc trên một site demo), và khi ta build trên production site.

Khi dev thì ta cần debug và biết cần sửa file nào nên cần thêm các thông báo lỗi và sourcemap vào:

Trên production site, ta không cần sourcemap và output error ra nữa. Chỉ đơn thuần là compile và minify CSS đầu ra:

Xử lý file Javascript

Cũng tương tự, ta có thể chia ra làm dev và production case. Tuy nhiên mình hơi lười nên gộp chung vào làm một, dùng cả cho khi build dev và production:

Watch file trong GulpJS

Bước này mới quan trọng, muốn GulpJS tự động thì ta nên có 1 task watch các file thay đổi để tự động chạy các tác vụ mà ta đã dùng, tránh việc ta phải bỏ dòng lệnh chạy đi chạy lại. Trong trường hợp này, mình gọi cả livereload() để nó tự động làm mới trình duyệt khi cần.

Cuối cùng, ta cần gộp thành 2 task

Task default sẽ làm nhiệm vụ khi dev (chỉ cần gõ gulp là chạy luôn). Task build sẽ làm nhiệm vụ khi chuẩn bị đẩy code lên production.

gulp.task('build', ['build-styles', 'build-scripts']);
gulp.task('default', ['styles', 'scripts', 'watch']);

Thư viện plugin của GulpJS

Như mình đã nói, GulpJS rất may mắn có được nhiều developer sử dụng. Bạn có thể tận dụng lợi thế này bằng cách vào thư viện để tìm cách plugin nào phù hợp nhu cầu sử dụng của bạn.

Một số package khác có vẻ hữu ích:

gulp-imagemin – Nén ảnh
gulp-htmlclean – Nén file HTML
gulp-strip-debug – Gỡ bỏ hết các câu lệnh debug như console và debugging

Một số case tình huống sử dụng GulpJS khác

Bạn có thể xem toàn bộ các cách sử dụng GulpJS ở đây.

[/sociallocker]

Kết luận

Nếu bạn làm theo từng hướng dẫn của bài viết này, mình tin là các bạn có thể biết được cách sử dụng GulpJS rồi. Đừng quên dành nhiều thời gian để tìm hiểu và sử dụng được nhiều hơn nữa các plugin của GulpJS để giúp project của bạn sử dụng nhanh, gọn và có code standard chuẩn hơn nhé.

Trong thời gian tiếp theo, Code Tốt sẽ giới thiệu cách sử dụng webpack – công cụ tương tự Gulp nhưng đang phổ biến nhất hiện nay.

Nguyễn Minh Khôi

Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.

2 bình luận về “Toàn tập về GulpJS”

Thành

21/03/2018 vào lúc 11:03

Anh Khôi
Một project có thể có rất nhiều thư viện css,js mình phải dùng.

Có nên nén nó hết vào 1 file khi đưa ra production không? ví dụ: style.min.css hoặc script.min.js (các thư viện đã đc nén hết vào).

Nếu ko nên nén thì em lại import nó vào theo cách bình thường ? Vậy có lợi ích gì nhanh hơn?
Trả lời
- Nguyễn Minh Khôi
  
  21/03/2018 vào lúc 12:03
  
  Theo mình thì nên nén nếu mình chạy ra điểm cuối là production. Còn nếu chưa chắc chắn về mức độ cần thiết của lib thì cứ tách riêng ra 1 file riêng. Ví dụ như trong WordPress development thì mình thường để 2 file là main.min.css và editor.min.css (editor dùng cho soạn thảo trong backend nhập sẽ giống style frontend).
  Trả lời