Viết CSS hiệu quả hơn với Sass và Gulp (Phần 1)

I. Sass và Gulp là gì?

Published in

VTeam

4 min readJan 5, 2017

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
https://gist.github.com/dacsang97/deaf00291023f490789f9bfb2000029f
SCSS Syntax
https://gist.github.com/dacsang97/f65dd656ff2b0e648914fe9cf5014547

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:

Để chạy task thì trong terminal, gõ gulp task-name

2. Viết 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’).
https://gist.github.com/dacsang97/777942f222e0dd749318145717b510b6

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:
https://gist.github.com/dacsang97/29f47a284aa19576584ceb983d3c521a

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:
https://gist.github.com/dacsang97/f65dd656ff2b0e648914fe9cf5014547

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.
https://gist.github.com/dacsang97/da060bc79d5bfdda48e172904f80cdea

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?