Bạn có chắc chắn muốn xóa bài viết này không ?
Bạn có chắc chắn muốn xóa bình luận này không ?
Viết CSS hiệu quả hơn với Sass và Gulp (Phần 1)
I. Sass và Gulp là gì?
1. Sass
Sass là một CSS Pre-Processor (Tương tự Less, Stylus, …). Sass được sinh ra để giúp bạn viết CSS nhanh và rõ ràng mạch lạc hơn. Sass có 2 bộ syntax là Sass và SCSS
Sass syntax
$font-stack: Helvetica, sans-serif $primary-color: #333 body font: 100% $font-stack color: $primary-color
SCSS syntax
$font-stack: Helvetica, sans-serif; $primary-color: #333; body { font: 100% $font-stack; color: $primary-color; }
2 syntax này khác nhau là SASS thì dùng cấu trúc thụt dòng, còn SCSS thì có cách viết giống với CSS.
Trong series này mình sẽ hướng dẫn viết với syntax SCSS.
2. Gulp
Gulp là một task runner giúp chúng ta dễ dàng quản lí các static file như html, css, js, images, … tối ưu assets cho quá trình đóng gói sản phẩm. Trong series này, chúng ta sẽ sử dụng Gulp để compile SCSS sang CSS.
Config Gulp để viết SCSS.
Thiết lập môi trường và tạo project mới với npm init
.
Bạn có thể xem lại bài viết trước đó tại đây
Cài đặt Gulp
npm i –g gulp
npm i –save-dev gulp
Xác định cấu trúc thư mục cho project
Trong cấu trúc thư mục này thì folder app là nơi để chúng ta viết code, dist (viết tắt của distribution) là nơi chứa web sau khi đã hoàn thành và tối ưu xong.
II. Hello world với Gulp
1. Gulp task
Tạo file có tên là gulpfile.js nằm trong thư mục gốc của project (gulpfile.js ngang hang với thư mục app).
Gulpfile.js là file chứa các config và task của Gulp.
Đầu tiên luôn luôn phải nhớ require gulp để gọi gulp trong gulpfile.
var gulp = require(‘gulp’)
Một gulp task sẽ có cấu trúc như sau:
gulp.task('task-name', function(){
// Công việc của task
})
Để chạy task thì trong terminal, gõ gulp task-name
2. Viết hello world
gulp.task('first-task', function(){
console.log("Hello world")
})
Tại terminal đang cd
vào thư mục gốc của project, chạy gulp first-task
Xuất hiện dòng chữ Hello world là thành công :D
3. Xử lí file trong gulp task
Gulp Task có thể đọc file bên trong project thông qua lệnh gulp.src(‘file-nguon’). Kết quả trả về sẽ được lưu vào folder chứa trong lệnh gulp.dest(‘folder-ketqua’).
gulp.task('task-name', function () {
return gulp.src(file-nguon') // Đọc file nguồn
.pipe(pluginChoGulp()) // Xử lí file nguồn thông qua plugin của Gulp
.pipe(gulp.dest(‘folder-ketqua’)) // Kết quả trả về của gulp task
})
III. Viết Gulp task để compile SASS
Chúng ta có thể compile Sass bằng Gulp thông qua một plugin có tên là gulp-sass.
1. Cài đặt gulp-sass:
npm i --save gulp-sass
Require gulp-sass vào phía sau gulp bên trong gulpfile.js
var gulp = require('gulp')
var sass = require('gulp-sass')
2. Viết gulp task cho Sass
Dựa vào mẫu task ở phía trên, chúng ta có thể viết được task cho Gulp compile Sass như sau:
gulp.task('sass', function(){
return gulp.src('app/styles/styles.scss')
.pipe(sass)
.pipe(gulp.dest('app/css'))
})
Test xem task này có hoạt động hay không? Tạo file styles.scss bên trong app/scss có nội dung giống như phần đầu giới thiệu, ở đây chúng ta sử dụng syntax scss:
$font-stack: Helvetica, sans-serif;
$primary-color: #333;
body {
font: 100% $font-stack;
color: $primary-color;
}
Tại terminal gõ gulp sass
để test thử.
Sau khi chạy xong bạn sẽ thu được kết quả như sau:
3.Tự động compile *.scss sang *.css khi code thay đổi.
Gulp cung cấp cho chúng ta một method có tên watch để đảm nhiệm công việc này. Dưới đây là syntax của gulp.watch() :
gulp.watch('files-to-watch', ['tasks', 'to', 'run']);
Có thể coi gulp.watch là một thằng hay soi mói và lắm chuyện, nó có thể “hóng chuyện” của nhiều file cùng một lúc :v.
Tạo task watch để bảo thằng gulp.watch phải focus vào hóng chuyện của SCSS.
gulp.task('watch', function(){
gulp.watch('app/scss/**/*.scss', ['sass']);
})
Lại test thử xem thằng watch này có hoạt động ổn định hay không. Tại terminal gõ gulp watch
.
Thay đổi thử nội dung trong file .scss
xem file .css
có tự update không?
Cảm ơn bạn đã đọc bài viết này.






