Khởi đầu một dự án webapp tuyệt vời với yeoman
frontend
15
yeoman
2
gruntjs
2
gulp
5
White

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
Yeoman

Đượ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.
yeoman

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

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

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. :)

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

thanh0beo

2 bài viết.
5 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
14 0
Jade là một template engine cho Node.js, nó khá đơn giản và biên dịch thành HTML và cực kì hữu ích cho FE developer (Ảnh) (Link) Lấy cảm hứng t...
thanh0beo viết gần 3 năm trước
14 0
Bài viết liên quan
White
28 6
Chuyển từ PHP sang Nodejs thật có nhiều cái bỡ ngỡ. Cấu trúc được viết dưới dạng NoneBlocking tăng tốc độ xử lý và chịu tải lên cực cao. Ứng dụng c...
Duyệt viết 3 năm trước
28 6
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


White
{{userFollowed ? 'Following' : 'Follow'}}
2 bài viết.
5 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á!