The streaming build system

Khi làm việc với React.JS, mình đã có cơ hội được tiếp cận với Gulp - một build system khá mạnh hỗ trợ chúng ta trong việc xây dựng giao diện (UI) cho website.

Trước đây, khi mình làm project được yêu cầu sử dụng SASS (Compass) và CoffeeScript, mình thường phải bật hai tab của terminal để hỗ trợ, rất là phiền phức, nhưng với Gulp, mình chỉ cần một tab của terminal là đủ . Vì vậy, nên mình đã viết một bộ đầy đủ các thành phần hỗ trợ căn bản cho việc xây dựng giao diện website. Khi xây dựng nó, mình cũng chỉ nghĩ đến việc tiện cho bản thân mình làm việc. Nhưng sau khi đọc bài Building với Gulp của Tran Van Luan mình mới có quyết định viết bài để chia sẻ nó đến với mọi người (cho dù trước đó mình cũng public nó trên Github cá nhân )!

Bộ công cụ này hỗ trợ biên dịch SASS (bao gồm SCSS, SASS và Compass. Về Compass, mọi người có thể đọc thêm tại trang chủ của nó, còn mình vẫn chỉ sử dụng nó ở mức căn bản là dùng các mixin hỗ trợ tạo CSS3 prefix cho các browser), LESS, CoffeeScript và tự động reload trình duyệt khi có sự thay đổi các thành phần trên.

Source code các bạn có thể vào đây để tải về và xem hướng dẫn. Mình có viết hướng dẫn chi tiết cho Windows và Ubuntu (còn Mac OSX thì mình chưa có cơ hội thử để viết hướng dẫn )!

Có thể trong thời gian tới, mình sẽ tìm hiểu về Jade (một Node template engine) rồi thêm nó vào bộ công cụ này và chia sẻ với mọi người làm sao để chia mã HTML ra thành các component, giúp cho việc phát triển UI thuận lợi và nhanh chóng nhất có thể.

Mọi ý kiến đóng góp để phát triển và sửa đổi bộ công cụ này, mọi người vui lòng để lại comment cho mình nhé ^^!

• Link project: https://github.com/namnv609/base-gulp-front-end-dev
• Link video demo: https://drive.google.com/file/d/0B1AQ6cykT8CieS00cHhWNGJxZWc/view?usp=sharing (mình quay video sau khi đã mở Visual Studio nên nó hơi cà giựt. Mọi người thông cảm nhé )!