- [DATABASE] Hướng dẫn thêm và cập nhật Extended Property Column trong Table Sqlserver
- [DEVEXPRESS] Hướng dẫn sử dụng Vertical Gridview để hiển thị thông tin sản phẩm
- [C#] Hướng dẫn sử dụng Json Schema để Validate chuỗi string có phải json
- [C#] Hướng dẫn sử dụng công cụ Clean Code trên Visual Studio
- [C#] Hướng dẫn Drag and Drop File vào RichTextBox
- [C#] Hướng dẫn tạo hiệu ứng Karaoke Text Effect Winform
- [C#] Sử dụng thư viện ZedGraph vẽ biểu đồ Line, Bar, Pie trên Winform
- [DATABASE] Hướng dẫn sort sắp xếp địa chỉ IP trên sqlserver sử dụng hàm PARSENAME
- [C#] Theo dõi sử kiện process Start hay Stop trên Winform
- [ASP.NET] Chia sẻ source code chụp hình sử dụng camera trên website
- [C#] Chạy ứng dụng trên Virtual Desktop (màn hình ảo) Winform
- [C#] Mã hóa và giải mã Data Protection API trên winform
- [C#] Hướng dẫn tạo Gradient Background trên Winform
- [DATABASE] Hướng dẫn convert Epoch to DateTime trong sqlserver
- [DATABASE] Hướng dẫn sử dụng STRING_AGG và CONCAT_WS trong sqlserver 2017
- [C#] Hướng dẫn Copy With All Property in Class Object
- [DEVEXPRESS] Hướng dẫn load Json DataSource vào GridView
- [C#] Hướng dẫn tạo chữ ký trên winform Signature Pad
- [DEVEXPRESS] Format code T-SQL highlight in RichEditControl
- [C#] Hướng dẫn upload file, hình ảnh từ Winform lên server API ASP.NET Core
[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!