Viết CSS hiệu quả hơn với Sass và Gulp (Phần 1)
Sass
8
frontend
16
gulp
5
js
5
White

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

img

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
img

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:
img

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?

img

Cảm ơn bạn đã đọc bài viết này.

SangND - VTeam - VBlog

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Sang Nguyễn Đắc

6 bài viết.
12 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
16 10
Mở đầu series bài viết tìm hiểu về Frontend Web mình sẽ hướng dẫn các bạn cài đặt và thiết lập môi trường làm việc hiệu quả. Các ứng dụng cần th...
Sang Nguyễn Đắc viết gần 2 năm trước
16 10
White
8 2
Angular 2 ra mắt kèm theo rất nhiều tính năng khá hữu ích Một trong số đó là sự xuất hiện của RxJS. Vậy bài này chúng ta sẽ cùng tìm hiểu căn bản v...
Sang Nguyễn Đắc viết gần 2 năm trước
8 2
White
5 5
Mình viết bài này vì muốn giới thiệu cho các bạn cách cài đặt một môi trường cơ bản nhất để làm quen với Angular 2 dành cho các bạn mới bắt đầu hoặ...
Sang Nguyễn Đắc viết gần 2 năm trước
5 5
Bài viết liên quan
White
6 3
Đây là vấn đề đau đầu và thường gây tranh cải nhất trong khi bạn làm việc nhóm hoặc cả chính những lúc bạn muốn xem lại code của mình. Thối quen l...
tuds viết hơn 2 năm trước
6 3
White
25 3
Nhiều khi đọc mấy cái bài tuyển dụng họ viết, biết gulp, biết bootstrap, biết js biết biết ... là một lợi thế. Nhiều lúc tôi cũng không hiểu nghĩa...
tuds viết hơn 2 năm trước
25 3
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
6 bài viết.
12 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!