- [C#] Di chuyển và thay đổi kích thước Control Winform khi ứng dụng đang chạy
- [VB.NET] Chia sẻ source tạo sắp xếp đội hình bóng đá Line-ups đội bóng
- [C#] Hướng dẫn chỉnh sửa Text của label trực tiếp trên winform
- [C#] Hướng dẫn custom TextBox giống Ultraviewer trên Winform
- [C#] Show Modal Winform like Bootstrap
- [DATABASE] Thứ tự thực hiện mệnh đề truy vấn SELECT trong Sqlserver
- [C#] Hướng dẫn viết addin Excel Lấy hình ảnh từ URL internet vào Excel
- [DATABASE] TSQL view max length all column data trên table Sqlserver
- [DEVEXPRESS] Hướng dẫn sử dụng MailMerge kèm Hình ảnh trên Winform
- [DATABASE] Hướng dẫn truy vấn xem kích thước lưu trữ của từng bảng ghi Table trên sqlserver
- [C#] Hướng dẫn Fake Date Time sử dụng thư viện Harmony
- [DATABASE] Phân biệt câu lệnh DDL và DML trong sqlserver
- [C#] Hướng dẫn convert file mã HTML sang file Pdf trên winform
- [DEVEXPRESS] Tạo các loại mã vạch Barcode trực tiếp trên Devexpress Barcode API
- [DEVEXPRESS] Hướng dẫn custom Simple button thành Progressbar
- [DATABASE] Tách số và chữ từ chuỗi - hàm tối ưu hóa tách số và chữ trong Sqlserver
- [C#] Tìm kiếm gần đúng Full Text Search sử dụng thư viện Lucene.NET
- [C#] Chia sẻ tài liệu, sdk và source code máy chấm công dòng máy ZKTeco
- [C#] Memory Cache là gì, và sử dụng trong ứng dụng Winform
- [DATABASE] Khóa chính Primary Key trong Sqlserver
[WEB] 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.
[WEB] Hướng dẫn gộp và nén file js và css sử dụng Gulp
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
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 11 và gulp phiên bản 3.
Nếu các bạn chạy trên Node 12 và gulp 4 sẽ bị lỗi nhé, các bạn chú ý vấn đề này nha.
Sau khi cài đặt Node js 11 vào xong, các bạn chạy các lệnh sau để cài đặt Gulp và các thư viện cần thiết.
npm install --global gulp-cli
npm i gulp@3.7.0
npm i gulp-concat
npm i gulp-uglify
npm i gulp-css
Sau khi cài đặt gulp và các thư viện cần thiết xong, các bạn tạo một project, với hai thư mục css và js.
Và bên ngoài cùng các bạn tạo 1 file gulpfile.js
(file này để thực thi lệnh gộp và nén).
Hình ảnh cấu trúc demo ứng dụng:
Và source code để gộp và nén rất đơn giản, các bạn mở file gulpfile.js và nhập đoạn code javascript như sau:
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var cssMin = require('gulp-css');
gulp.task('css', function() {
gulp.src([
'./css/bootstrap.css',
'./css/materialize.min.css',
'./css/reset.css',
'./css/main-stylesheet.css',
'./css/colors.css',
'./css/responsive.css',
'./css/font-awesome.min.css',
'./css/prism.css',
'./css/table.css',
'./css/custom2.css',
'./css/jquery.rateyo.min.css',
'./css/animate.min.css',
'./css/shCoreDefault.css',
'./css/jquery.rateyo.min.css',
'./css/mystyle.css',
]).pipe(concat('app.min.css'))
.pipe(cssMin())
.pipe(gulp.dest('./css'));
});
gulp.task('scripts', function(){
gulp.src ([
'./js/OneSignalSDK.js',
'./js/prism.js',
'./js/jquery-latest.min.js',
'./js/jquery.nail.min.js',
'./js/jquery.rateyo.min.js',
'./js/lazyload.min.js',
'./js/main.js',
'./js/materialize.min.js',
'./js/theme-scripts.js',
'./js/backtotop.js',
'./js/bootstrap.min.js',
'./js/placeholderTypewriter.js'
])
.pipe(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./js'))
});
gulp.task('default', ['css', 'scripts']);
Sau khi nhập xong, các bạn mở terminal (CMD command) và gõ lệnh: gulp
để thực thi, kết quả trả về như hình bên dưới là thành công.
Chúc các bạn thành công!