Tạo Kickstart Angluar project từ Yeoman
White

Trương Quang Khải viết ngày 15/11/2015

Hôm nay, tôi muốn chia sẻ với các bạn từng bước để tạo ra 1 blank Angluar project từ Yeoman. 1 số bạn sẽ nghĩ rằng việc đó dễ ẹc, vì trên website đã có bài tutorial đầy đủ về nó rồi, cần gì viết. Thật tế mà nói, nhìn vậy chứ hổng phải vậy.

Trên yeoman tutorials nó sẽ guide bạn như sau:
Đầu tiên cài bower, generator-angular yo grunt-cli bằng câu lệnh

npm install -g bower grunt-cli generator-angular

Ở đây tôi thấy yeoman rất đểu khi không nhắc các bạn cài generator-karma. Không có package này khi bạn tạo angular project nó sẽ không tạo ra file karma.config.js (tạo hình dung là file cấu hình cho testing), sẽ dẫn đến việc build bị lỗi. Vì vậy các bạn chịu khó install thêm dùm tui

npm install -g generator-karma

Tiếp theo là tạo 1 thư mục, chẳng hạn như angular-example

mkdir angular-example
cd angular-example

Và gõ dòng sau đây để tạo 1 angular project

yo angular <ten_project>

Tiếp theo nó sẽ đưa ra hàng loạt câu hỏi về việc bạn có chọn Bootstrap không? Có xài SASS không? Và Yeoman gợi ý bạn nên chọn không với SASS như hình sau

alt text

Nếu chẳng may bạn chọn sử dụng Sass (with Compass) trong câu hỏi đầu tiên. Lúc khởi động ứng dụng bạn sẽ gặp lỗi này

Running "compass:server" (compass) task
Error: invalid option: --fonts-dir

Usage: compass compile [path/to/project] [path/to/project/src/file.sass ...] [options]

Có 2 cách giải quyết: bạn chọn No ngay từ đầu. Cách 2 bạn phải cài Ruby installer for window và gõ lệnh này để install compass

gem install compass

Và những gì sau đó các bạn chỉ việc rung đùi đợi nó tạo cho xong cái sườn của project. Tôi chỉ nói là mới tạo cái sườn thôi, chưa build nha.

Ok sau yeoman tạo xong các sườn cho bạn rồi thì việc tiếp theo là bạn test thử những lệnh sau theo thứ tự ưu tiên từ trên xuống.

grunt

Chắc chắn với các bạn luôn là sẽ có 1 đống lỗi trong này. Vì bài viết quá dài nên tui chỉ tóm tắt cách vá lỗi nhanh và giải thích sơ qua để khỏi tốn giấy.

Step 1. Thường nó sẽ báo những lỗi như không tìm thấy grunt-karma, karma-jasmine, karma-phanstom-launcher, bạn chỉ việc gõ 1 dòng này cho tui là đủ

npm install --save-dev karma grunt-karma jasmine-core karma-jasmine karma-phantomjs-launcher

Có 1 sự thật đau lòng là, nếu bạn nào chạy Ubuntu thì sẽ không bị báo lỗi hệ thống cần compile trên tool v2.0.0 nhưng bạn lại cài v4.0. Còn bạn nào chạy node.js trên window thì khó thoát kiếp nạn. Giải pháp ổn nhất mà tui được biết là bạn phải cài VS Studio 2015 express cỡ 8GB thì phải. Cài xong mới thấy trời quang mây tạnh.

Step 2. Bạn vào file package.json từ thư mục gốc, sửa cho tui 2 dòng này.

"grunt-contrib-imagemin": "^1.0.0",
"imagemin": "^4.0.0",

Lỗi này báo rồi có 1 thuộc tính không tìm thấy trong khai báo cấu hình của grunt-contrib-imagemin, và lỗi này được fix ở phiên bản 1.0.0 nên phải nâng cấp version của nó lên

Ok đến đây xem như tui đã giúp các bạn fix hết những bug khó chịu ẩn tàng của yeoman. Các bạn test tiếp lệnh cuối

grunt serve

Nếu thấy nó load lên trang web là ổn. (1 số bạn sẽ chạy lệnh này trước, thường là sẽ chạy được và tưởng rằng nó ổn, nhưng bug chỉ hiện ra khi bạn chạy lên grunt trước)

Cảm ơn các bạn đã đọc.

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

Trương Quang Khải

1 bài viết.
0 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


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