Khởi đầu một dự án webapp tuyệt vời với yeoman

frontend

29

yeoman

2

gruntjs

2

gulp

5

thanh0beo viết ngày 28/04/2016

Qua rồi những lúc bạn phải bắt đầu dự án webapp mới với việc phải cài đặt, quản lý các dependency, các thư viện , rồi thực hiện các thao tác như nén ảnh, minify js, css,..
Yeoman sinh ra giúp bạn giải quyết những công việc trên một cách hiệu quả nhất

Được phát hành tại Google I/O 2012, Yeoman là một gói phát triển phía client-side, nó giúp các developer tạo nên ứng dụng web một cách nhanh chóng mà vẫn đảm bảo về chất lượng.

Lấy ý tưởng từ generator của Ruby on rails ,chỉ với cú pháp đơn giản yeoman sẽ gen ra các file ,các thư viện cần thiết để xây dựng một webapp, các task được quản lí ,unit test bởi build system như Grunt hoặc Gulp, thư viện được quản lí bởi Bower.

Hướng dẫn tạo dự án Frontend với Yeoman

b1: Cài NodeJs tại https://nodejs.org/

b2: Cài các gói cần thiết (yo, bower, gulp hoặc grunt)

npm install -g yo bower grunt-cli gulp

b3: Cài bộ generator , mình cài genrator gulp webapp (vì mình thích Gulp hơn Grunt) .Bạn có thể tìm kiếm nhiều bộ generator trên trang chủ của yeoman tại đây, chromeapp, wordpress theme, angular app,.. có đầy đủ

npm install -g generator-gulp-webapp

b4: Di chuyển đến thư mục bạn muốn chứa source code rồi chạy

yo gulp-webapp

.Bộ này mặc định sẽ bao gồm HTML5 Boilerplate, jQuery, Modernizr, và Bootstrap, SCSS. bạn có thể tùy chọn bằng nút space hoặc cứ để mặc định

Cấu trúc thư mục nó gen ra kiểu như này :

b5: Thưởng thức thành quả

Chạy gulp serve để preview trên và live edit ngay trên trình duyệt . Đặc biệt nó còn có cả Browser sync ,kiểu như sửa css 1 nhát thì nó sẽ thay đổi ngay trên trình duyệt, và các thiết bị mobile trong mạng LAN có thể truy cập vào trang mình đang dev, và khi scroll trang này trên mobile chẳng hạn nó cũng tự động scroll trên laptop đang dev.
Xong xuôi thì gulp build, nó sẽ build ra một bản html/css hoàn chỉnh với các file css,js đc nén ,tối ưu, ảnh ọt, font được nén một cách tối ưu nhất.

Bonus: video của một cu tây trên youtube, hình như bản cũ hơn và sử dụng grunt ,còn đâu thì cũng ntn thôi

Bài viết hơi chuối, Bro nào có ý kiến đóng góp, hay gạch đá có thể comment bên dưới. :)