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

Sass

10

frontend

27

gulp

5

js

5

Sang Nguyễn Đắc viết ngày 05/01/2017

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.

SangND - VTeam - VBlog