HTML CSS nâng cao, cắt giao diện toàn tập với Gulp, Pug, Sass
HTML CSS nâng cao, cắt giao diện toàn tập với Gulp, Pug, Sass là một chủ đề rất quan trọng và hữu ích cho những ai đang làm việc trong lĩnh vực thiết kế web. Trong bài viết này, chúng tôi sẽ giới thiệu cho các bạn những kiến thức cơ bản về Gulp, Pug và Sass cùng với cách áp dụng chúng để tạo ra giao diện web tối ưu nhất. 1. Gulp là gì? Gulp là một công cụ để tự động hóa công việc như biên dịch sass, js, tự động refresh lại trình duyệt. Điều đó giúp tiết kiệm thời gian, tăng năng suất và giúp cho các lập trình viên có thể tập trung vào việc thiết kế thay vì mất thời gian cho các công việc lặt vặt. 2. Pug là gì? Pug (trước đây được biết đến là Jade) là một ngôn ngữ mô tả HTML được viết bằng Javascript. Nó giúp cho các lập trình viên có thể dễ dàng và rõ ràng hơn khi viết mã HTML. 3. Sass là gì? Sass là một ngôn ngữ lập trình CSS. Nó giúp cho các lập trình viên có thể tái sử dụng mã lệnh, thêm tính năng động và tăng tốc độ viết mã CSS. 4. Cắt giao diện toàn tập với Gulp, Pug, và Sass Để sử dụng Gulp, Pug và Sass để cắt giao diện toàn tập, chúng ta cần có một số công cụ cơ bản sau đây: - Node.js: môi trường thực thi mã JavaScript nhanh và đáng tin cậy dùng để biên dịch các script Gulp. - NPM (Node Package Manager): được sử dụng để cài đặt các gói phần mềm cần thiết (ví dụ như Gulp, Pug và Sass) cho dự án của chúng ta. - Gulp: công cụ để tự động hóa các tác vụ trong dự án, như biên dịch Sass thành CSS, tạo file Sitemap, tạo các tham số file chung, hoặc tự động reload trình duyệt khi chúng ta thay đổi các file code. Để bắt đầu viết mã cho dự án, chúng ta cần tạo ra một cấu trúc folder cơ bản, bao gồm: - Folder src: chứa các file gốc của dự án, chúng ta sẽ tất cả các file cần biên dịch ở đây trước khi chúng ta build ra kết quả cuối cùng. - Folder dist: chứa các file đã được biên dịch và tối ưu hóa. Sau khi đã tạo cấu trúc folder cơ bản, ta tiếp tục cài đặt Gulp, Pug và Sass trên dự án. Các bước cài đặt như sau: - Bước 1: Tạo package.json sử dụng Terminal và gõ vào lệnh sau: npm init Chú ý, nếu cài đặt trên Windows thì có thể chạy dưới quyền administrator. - Bước 2: Cài đặt Gulp và plugin Gulp có rất nhiều plugin hỗ trợ, ví dụ như: gulp-sass: hỗ trợ biên dịch Sass gulp-pug: hỗ trợ biên dịch Pug gulp-autoprefixer: hỗ trợ tự động thêm tiền tố cho các thuộc tính để hỗ trợ nhiều trình duyệt gulp-imagemin: giảm dung lượng file ảnh Cài đặt Gulp và các plugin: npm install --save-dev gulp gulp-sass gulp-pug gulp-autoprefixer gulp-imagemin - Bước 3: Tạo file gulpfile.js Tạo một file gulpfile.js trong folder gốc của dự án và bắt đầu viết mã cho công việc của mình: var gulp = require('gulp'); var sass = require('gulp-sass'); var pug = require('gulp-pug'); var autoprefixer = require('gulp-autoprefixer'); var imagemin = require('gulp-imagemin'); // Sass task gulp.task('sass', function() { return gulp.src('src/scss/**/*.scss') .pipe(sass()) .pipe(autoprefixer({ browsers: ['last 2 versions'] })) .pipe(gulp.dest('dist/css')) }); // Pug task gulp.task('pug', function() { return gulp.src(['src/**/*.pug', '!src/**/_*.pug']) .pipe(pug({ pretty: true })) .pipe(gulp.dest('dist')); }); // Image compression task gulp.task('imagemin', function(){ gulp.src('src/images/**/*') .pipe(imagemin()) .pipe(gulp.dest('dist/images')) }); // Watch task gulp.task('watch', function() { gulp.watch('src/scss/**/*.scss', ['sass']); gulp.watch('src/**/*.pug', ['pug']); gulp.watch('src/images/*', ['imagemin']); }); // Default task gulp.task('default', ['pug', 'sass', 'imagemin', 'watch']); Kết luận Trên đây là những kiến thức cơ bản về Gulp, Pug và Sass cùng với cách áp dụng chúng để tạo ra giao diện web tối ưu nhất. Hy vọng với những kiến thức này, các bạn có thể tạo ra một giao diện web đẹp và chuyên nghiệp hơn. Chúc các bạn thành công!