Hướng dẫn gộp và nén file css, js với Gulp
Xin chào các bạn, bài viết hôm nay mình sẽ hướng dẫn các bạn cách gộp và nén file css và js với thư viện Gulp JS, giúp cải thiện tốc độ tải trang website.
Gulp là một công cụ giúp bạn tự động hóa nhiều task (nhiệm vụ) trong quá trình phát triển web. Nó thường được sử dụng để làm các tác vụ front end như:
- Tạo ra một web server
- Reload trình duyệt một cách tự động bất cứ khi nào một file được lưu
- Sử dụng các preprocessor giống như Sass hoặc LESS
- Tối ưu hóa các tài nguyên như CSS, JavaScript và hình ảnh
![Untitled-1.jpg](https://add.pics/images/2021/09/15/Untitled-1.jpg)
Yêu cầu cài đặt:
Nodejs
và các thư viện sau:
gulp, gulp-uglify, gulp-concat, gulp-css
Ghi chú: Ở bài viết này mình sử dụng Node js phiên bản v14.17.6
![Untitled-2f09e93c3315d09d2.jpg](https://add.pics/images/2021/09/15/Untitled-2f09e93c3315d09d2.jpg)
Nếu các bạn chưa cài gulp thì các bạn chỉ cần chạy lệnh:
npm install -g gulp-cli
![Screenshot-2021-09-15-200846.png](https://add.pics/images/2021/09/15/Screenshot-2021-09-15-200846.png)
Tạo một thư mục để tiến hành chạy project của chúng ta:
![Screenshot-2021-09-15-201721.png](https://add.pics/images/2021/09/15/Screenshot-2021-09-15-201721.png)
Khởi tạo một project:
![Screenshot-2021-09-15-201816.png](https://add.pics/images/2021/09/15/Screenshot-2021-09-15-201816.png)
Cài đặt các dependencies:
Bash:
npm i gulp gulp-concat gulp-uglify gulp-css
![Screenshot-2021-09-15-202002.png](https://add.pics/images/2021/09/15/Screenshot-2021-09-15-202002.png)
Cấu trúc thư mục mình dùng ở đây như thế này, tùy trường hợp project của các bạn như thế nào nhé, ở đây mình lấy ví dụ cho nên mình làm đơn giản thuii
![Bacda :bacda: :bacda:](/styles/default/xenforo/smilies/danchoi/bacda.gif)
![Untitled-375dece1df79fa678.jpg](https://add.pics/images/2021/09/15/Untitled-375dece1df79fa678.jpg)
Oke ở css chúng ta có các file:
header.css, footer.css, style.css
, mình sẽ gộp 3 file này và sẵn tiện minify css luôn.Ở thư mục js chúng ta có hai file js là
app.js và others.js
, mình cũng sẽ gộp chung và minify js luôn.File gulpfile.js các bạn sẽ điền nội dung như sau:
JavaScript:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var cssMin = require('gulp-css');
gulp.task('css-task', function () {
return gulp.src([
'./css/header.css',
'./css/footer.css',
'./css/style.css'
]).pipe(concat('all.min.css'))
.pipe(cssMin())
.pipe(gulp.dest('./output'));
});
gulp.task('js-task', function () {
return gulp.src([
'./js/app.js',
'./js/others.js',
])
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./output'))
});
gulp.task('default', gulp.parallel('css-task', 'js-task'));
Xong, lúc đầu thì các file css và js đều là nội dung riêng lẻ:
![Untitled-4735a511444a30618.jpg](https://add.pics/images/2021/09/15/Untitled-4735a511444a30618.jpg)
Bash:
gulp
![Screenshot-2021-09-15-203814.png](https://add.pics/images/2021/09/15/Screenshot-2021-09-15-203814.png)
Kết quả:
![Screenshot-2021-09-15-203851.png](https://add.pics/images/2021/09/15/Screenshot-2021-09-15-203851.png)
![Screenshot-2021-09-15-203900.png](https://add.pics/images/2021/09/15/Screenshot-2021-09-15-203900.png)
Chúc các bạn thành công!