Hướng dẫn viết Gulp file cho dự án với các tác vụ tách biệt

Tổng quan ​

Gulp ngoài việc giúp tự động hóa các tác vụ có tính lặp lại, nó còn giúp chúng ta tối ưu hóa dự án, giúp tăng tốc độ tải trang web. Gulp rất thân thiện với front-end developer, giúp họ tiết kiệm thời gian và công sức để thực hiện cutting HTML, CSS, JavaScript.

Ở đây tại hạ không đề cập đến cách cài đặt Gulp, mà chúng ta sẽ tập trung vào viết Gulp file cho dự án của mình. Cũng như sẽ làm quen với một định dạng file mới là gulpfile.mjs (ES Module) thay vì gulpfile.js (CommonJS).

Thông thuờng chúng ta sẽ viết tất cả các tác vụ trong một file gulpfile.js. Tuy nhiên, khi dự án lớn, chúng ta cần tách biệt các tác vụ ra thành các file riêng biệt để dễ quản lý. Trong bài viết này, chúng ta sẽ tìm hiểu cách viết Gulp file cho dự án của mình với các tác vụ tách biệt. Trong bài này tại hạ cũng dùng cả 2 cách viết Gulp file là CommonJS và ES Module.

Cài đặt Gulp ​

Để cài đặt Gulp, chúng ta cần cài đặt Gulp CLI và Gulp local. Gulp CLI giúp chúng ta chạy các lệnh Gulp từ command line, còn Gulp local giúp chúng ta chạy các tác vụ trong dự án.

npm install --global gulp-cli
npm install --save-dev gulp

Viết Gulp file ​

Tạo một file gulpfile.mjs trong thư mục gốc của dự án. File này sẽ chứa các tác vụ mà chúng ta muốn thực hiện.

import gulp from 'gulp';

import cleanDist from './tasks/cleanDist.js';

export default gulp.series(
    cleanDist,
);

Trong file gulpfile.mjs trên, chúng ta đã import Gulp và một tác vụ cleanDist từ file tasks/cleanDist.js. Tác vụ cleanDist sẽ xóa toàn bộ nội dung trong thư mục dist.

Bây giờ ta sẽ tạo file tasks/cleanDist.js:

const gulp = require('gulp');
const clean = require('gulp-clean');

function cleanDist() {
	return gulp.src("./dist", {
			read: false,
			allowEmpty: true
		})
		.pipe(clean({
			force: true
		}));
}

module.exports = cleanDist;

Hoặc có thể viết theo kiểu ES Module:

import gulp from 'gulp';
import clean from 'gulp-clean';

export default function cleanDist() {
    return gulp.src("./dist", {
            read: false,
            allowEmpty: true
        })
        .pipe(clean({
            force: true
        }));
}

Tuy nhiên kiểu viết này sẽ không đề cập nhiều trong bài viết này.

Chạy Gulp ​

Mở file package.json và thêm một script để chạy Gulp:

{
    "scripts": {
        "dev": "gulp",
        "build": "gulp build"
    },
}

Bây giờ chúng ta có thể chạy Gulp bằng cách chạy lệnh:

npm run dev

Kết quả, tác vụ cleanDist sẽ được thực thi và nó sẽ xóa toàn bộ nội dung trong thư mục dist.

Tiếp theo, chúng ta sẽ thêm một tác vụ khác để biên dịch file CSS.

Biên dịch file CSS ​

Tạo một file tasks/sassCompile.js:

const gulp = require('gulp');
const dartSass = require('sass');
const gulpSass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const postcss = require('gulp-postcss');
const browserSync = require('browser-sync');
const sass = gulpSass(dartSass)

function sassCompile() {
	return gulp.src("./src/styles/*.scss")
		.pipe(sourcemaps.init())
		.pipe(sass({
			outputStyle: 'expanded',
			silenceDeprecations: ['legacy-js-api']
		}).on('error', sass.logError))
		.pipe(postcss())
		.pipe(sourcemaps.write('.'))
		.pipe(gulp.dest("./dist/css"))
		.pipe(browserSync.stream())
}

module.exports = sassCompile

Tiếp tục tạo một tác vụ browserSyncInit trong file tasks/browserSyncInit.js:

const browserSync = require("browser-sync")
const gulpWatch = require("./gulpWatch")

function browserSyncInit() {
	browserSync.init({
		server: {
			baseDir: "./dist",
		},
		port: 5000,
		// ui: {
		// 	port: 5001
		// },
		browser: "google chrome",
	});

	gulpWatch();
}

module.exports = browserSyncInit;

Tiếp tục tạo một tác vụ gulpWatch trong file tasks/gulpWatch.js:

const gulp = require("gulp");
const browserSync = require("browser-sync");
const sassCompile = require("./sassCompile");

function gulpWatch() {
	// Watch Sass
	gulp.watch("./src/styles/**/*.scss").on('change', gulp.series(sassCompile, browserSync.reload));
}

module.exports = gulpWatch;

Mở file gulpfile.mjs và import tác vụ sassCompile:

import gulp from 'gulp';
import browserSync from 'browser-sync';
browserSync.create();

import cleanDist from './tasks/cleanDist.js';
import sassCompile from './tasks/sassCompile.js';
import browserSyncInit from './tasks/browserSyncInit.js';

export default gulp.series(
    cleanDist,
    sassCompile,
    browserSyncInit
);

Như vậy chúng ta đã thêm tác vụ sassCompile và browserSyncInit vào file gulpfile.mjs. Tác vụ sassCompile sẽ biên dịch file CSS từ thư mục src/styles sang thư mục dist/css. Tác vụ browserSyncInit sẽ khởi tạo server và mở trình duyệt.

Trong file browserSyncInit.js chúng ta đã import tác vụ gulpWatch để theo dõi sự thay đổi của file Sass. Mỗi khi file Sass thay đổi, tác vụ sassCompile sẽ được thực thi và trình duyệt sẽ tự động reload.

Kết luận ​

Trên đây là hướng dẫn cơ bản về viết Gulp file cho dự án của mình. Quý vị có thể tải về mã nguồn đầy đủ tại https://github.com/baonguyenyam/gulp-tailwindcss-pug-docker để tham khảo.