Thumbnail

Sử dụng Gulp để bên dịch CSS từ SCSS

Thumbnail

Feb Dao

|

Bài viết này sẽ hướng dẫn sử dụng GULP để biên dịch SCSS sang CSS một cách dễ dàng nhất, bao gồm tích hợp các tính năng: nén file css và tự động thêm các tiền tố cho các thuộc tính CSS3 để hoạt động tốt trên các trình duyệt khác nhau

Để có thể sử dụng được GULP, trước hết bạn cần cài đặt NodeJs

 

Cách cài đặt NodeJs

Cài đặt NodeJs rất đơn giản, bạn chỉ cần vào trang chủ của nó https://nodejs.org và tải về bản cài đặt phù hợp với hệ điều hành của bạn

Download NodeJs

Sau khi cài đặt xong, mở terminal và kiểm tra xem NodeJs có hoạt động trong máy bạn hay ko, bằng cách gõ lệnh:

node --version

Nếu như việc cài đặt đã thành công, thì sẽ hiển thị cho bạn biết version của NodeJs hiện tại trên máy bạn là bao nhiêu

Node version

 

Khởi tạo file package.json

Sau khi đã cài đặt NodeJs, giờ thì mọi thứ đã sẵn sàng để bắt đầu :D

Trước tiên, chúng ta cần khởi tạo 1 file package.json bằng cách.

- Mở terminal trong thư mục làm việc của bạn và chạy lệnh

npm init

sau đó nhập vào những thông tin cần thiết như:

- Name: Tên của project
- version: Phiên bản
- description: Dòng mô tả dài về project này
- git repository: Bạn có thể thêm đường dẫn đến git repos nếu như bạn sử dụng git/gitlab/bitbucket
- keywords: Từ khóa
- author: tên người hoặc tổ chức làm dự án này
- license: giấy phép tiêu chuẩn
package.json

 

Cài đặt và làm việc với Gulp

Sau khi đã khởi tạo được file package.json bước tiếp theo chúng ta sẽ tiến hành cài đặt Gulp và các package cần thiết

Gulp:

Để cài đặt gulp, bạn chỉ cầy chạy dòng lệnh

npm install gulp --save

trong đó:

npm install: câu lệnh để cài đặt package
gulp: là tên package
--save: khi bạn thêm option này vào, nó sẽ tự động lưu package mà đang cần cài đặt vào trong file package.json

sau đó, bạn sẽ thấy gulp được tự động thêm vào trong dependencies ở file package.json

package.json file

khi đó thư mục node_modules cũng được tự động sinh ra - đây là thư mục chưa các packages đã được cài đặt (bao gồm cả các package kèm theo)

gulp folder

Thư mục node_modules thường sẽ rất nặng do chưa nhiều package khác, mục đích của nó chỉ được sử dụng trong quá trình dev, nên bạn không nên push nó lên môi trường live/production

node_modules

(to be continue)

Add new comment

The content of this field is kept private and will not be shown publicly.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.

Comments

  • Allowed HTML tags: <em> <strong> <cite> <blockquote cite> <ul type> <ol start type> <li> <dl> <dt> <dd> <p>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
  • Use [gist:#####] where ##### is your gist number to embed the gist
    You may also include a specific file within a multi-file gist with [gist:####:my_file].

Spread the word