Cài đặt môi trường Frontend Dev cho project Nodejs và SASS

Mục tiêu

Hoàn thành phần thiết lập ban đầu cho một project frontend (HTML/SCSS và NodeJS), tiết kiệm thời gian build và compile cho anh em Frontend Developer. Các mục tiêu nhỏ bao gồm:

• Khởi tạo cấu trúc cơ bản project frontend.
• Cài đặt các packages thực sự hữu ích, giúp developer tập trung build dự án.
• Cấu hình package.json theo ý muốn và có thể tái sử dụng cho các project khác.
• Build được server trong 1s với live-server, tiết kiệm thời gian đáng kể.

Chuẩn bị

NodeJS: download và cài đặt tại trang chủ.

Sau khi cài đặt xong, chạy lệnh kiểm tra version cho node và npm (npm command line sẽ tự được cài đặt sau khi cài NodeJS)

Kiểm tra NodeJS đã được cài đặt hay chưa:

Kiểm tra npm đã được cài chưa:

Triển khai

Cấu trúc thư mục điển hình

Giải thích sơ về cấu trúc trên:

• index.html: file markup chính
• css: chứa file *.css đã được compiled từ file *.scss
• sass: chứa các files *.scss chính để build layout
  • abstracts: chứa các file nhằm mục đích tái sử dụng code (ví dụ: _mixin.scss, _variables.scss, …)
  • base: gồm các file config cơ bản cho project (ví dụ: reset css, _typography.scss, …)
  • components: gồm các file format cho từng thành phần nhỏ trong ứng dụng (ví dụ: buttons, badges, card, icons, …)
  • layout: chứa các files định dạng cho layout tổng thể (header, footer, grid, …)
  • pages: gồm các pages của project (home, about, product, …)
  • main.scss: đây là file tập hợp tất cả các thành phần ở trên lại, sau đó sẽ được dùng để compile file *.css để nhúng vào website.

Để dễ hình dung hơn nội dung thư mục “sass”, quan sát hình bên dưới, đây là các files cần thiết như mô tả ở trên:

Danh sách các package cần cài là:

• node-sass: compile file *.scss thành file *.css (ngoài ra package còn hỗ trợ task “watch” – bắt sự kiện thay đổi file để tự load lại web browser, cực cool!)
• live-server: hỗ trợ build server tự động, cực kỳ hữu ích cho bạn nào không thích config server rườm rà, mà vẫn có thể bắt tay vào build project nhanh chóng.
• autoprefixer: tự generate các prefix hỗ trợ crossbrowser (-moz,-o,-webkit)
• concat: gom các file css lẻ thành một file duy nhất
• npm-run-all: kết hợp nhiều lệnh run cùng lúc, package này rất hữu ích
• postcss-cli: package hỗ trợ cho các package sass khác

Trước tiên hết, các bạn cần trỏ đường dẫn vào thư mục root của project, và chạy lệnh khởi tạo nodejs (để download các gói npm “node_modules” về máy local):

Tiếp theo, khởi tạo file package.json cho project, dùng lệnh:

Lúc này sẽ hiện lên một số câu hỏi về thông tin project, sẽ có gợi ý hiện lên, các bạn muốn để default thì cứ <enter> miết thôi.

Sau khi xong các bước fill-in thông tin, một file package.json sẽ được tạo ra ở thư mục gốc của project.

Sau đó dùng command line, tiến hành cài đặt các packages đã list bên trên, theo cú pháp:

npm install node-sass --save-dev
npm install autoprefixer --save-dev
npm install postcss-cli --save-dev
npm install concat --save-dev
npm install npm-run-all --save-dev
npm install live-server -g

Trong câu lệnh trên sử dụng option --save-dev được hiểu là các package trên sẽ chỉ sử dụng ở môi trường dev, không sử dụng trên production. Và tất cả sẽ được cập nhật thông tin vào file package.json.

Cấu hình cho file package.json

Trong file này, các bạn hãy chú ý key “scripts”, tại đây chúng ta sẽ tạo các lệnh command để thực thi các tác vụ phục vụ các việc chính sau:

• Compile SASS files: compile files *.scss thành *.css
• Prefix CSS attributes: tự động tìm và thêm prefix cho các thuộc tính css nhằm hỗ trợ format cross browsers.
• Nén file css: nén file css đã được compiled, nhằm tối ưu load trang.
• Build server test: một server ảo sẽ được tạo tự động bằng Nodejs, và chúng ta có thể truy cập vào đường dẫn IP để test trên các thiết bị khác, cực cool. Đồng thời “theo dõi” mỗi khi file được chỉnh sửa, web browser sẽ tự động được load lại.

Theo như trên, lần lượt chúng ta add thêm các custom key cần thiết vào scripts:

Giải thích một chút về đoạn config trên, trong json scripts, phần key chính là custom command do chúng ta tự đặt, value chính là phần command theo quy ước của packages (tham khảo trên trang npm về cách sử dụng package tương ứng đó)

Năm dòng config đầu tiên là về việc xử lý file *.scss, để cho ra được thành quả là file *.css đã được compiled và nén. Flow thực thi bao gồm:

• Compile scss/main.scss thành css/style.comp.css
• Concat css: nối các file css khác (nếu có) thành một file duy nhất, và đặt tên là style.concat.css
• Prefix css: tự động điền thêm prefix cho các thuộc tính css hỗ trợ đa trình duyệt, dùng tiếp từ file style.concat.css và tạo thành file mới là style.prefix.css
• Compress css: nén file css, loại bỏ các khoảng trống dư thừa trong file, nhằm giảm dung lượng file, tối ưu load trang. Lúc này sẽ tạo ra được file final là style.css (sẽ là file được nhúng vào html)

***Lưu ý: chỉ cần chạy lệnh cuối là npm run build:css, và chỉ cần chạy khi project đã hoàn tất, mục đích để nén file css cuối cùng, giảm dung lượng file.

Ba dòng config cuối, là xử lý việc build server test, và tích hợp tự động bắt sự kiện thay đổi file để load lại web browser.

***Lưu ý: chỉ cần chạy lệnh cuối là npm run start mỗi khi bắt tay vào việc develop project.

Sau khi nhập vào config như trên, các bạn chỉ việc quan tâm đến hai commands build server và compile file SASS.

Sau khi chạy lệnh npm run start, một tab mới trên trình duyệt sẽ mở ra, và từ đây chúng ta có thể bắt tay vào triển khai project được rồi.

Kết

Túm lại flow những gì chúng ta đã thực hiện từ đầu đến giờ bao gồm các ý chính sau:

• Khởi tạo cấu trúc cơ bản project frontend.
• Cài đặt các packages thực sự hữu ích, giúp developer tập trung build dự án.
• Cấu hình package.json theo ý muốn và có thể tái sử dụng cho các project khác.
• Build được server trong 1s với live-server, tiết kiệm thời gian đáng kể.

Kể từ giờ, mỗi khi các bạn muốn build một project nào khác, chỉ cần copy file package.json này vào thư mục gốc, sau đó chạy lần lượt các command sau:

Cảm ơn cộng đồng developer đã đóng góp cho chúng ta những tool thực sự hữu ích như thế này. Ngại ngùng gì mà không triển chứ nhỉ?

Chúc các bạn thành công.