Làm cách nào để cập nhật và bao gồm Twitter Bootstrap 3 trên webapp hoặc yo angular?

Question

Tôi sử dụng yo webapp hoặc yo góc cạnh để tạo mới một dự án, và tôi nhận được Bootstrap bao gồm là phiên bản 2.3.2, nhưng tôi muốn sử dụng phiên bản mới nhất của Bootstrap.

Làm thế nào tôi có thể cập nhật gói Bootstrap bằng dấu nhắc lệnh và cập nhật sau khi tạo webapp mới hoặc góc cạnh yo, chọn bao gồm Twitter Bootstrap là phiên bản cuối cùng?

Answer 1

ứng dụng web của Yeoman & máy phát điện góc lấy Sass cho Bootstrap, dựa trên bản 2.3.2 xây dựng của Twitter Bootstrap.

Sau khi bạn chạy yo webapp hoặc yo angular, bạn có thể thêm Bootstrap 3.0 bằng cách chạy lệnh sau.

$ bower install --save bootstrap 

Điều này sẽ tải xuống Bootstrap 3.0 cho bạn.

Answer 2

@micjamking Câu trả lời là một gợi ý thực sự tốt, nhưng vì với những thứ Yeoman nên dễ dàng hơn, tôi sẽ giúp bạn tiết kiệm một số googling:

1. yo angular - Nói 'Không' để Bootstrap ở đây - nếu không nó sẽ tải về phiên bản 2.x
2. bower install --save bootstrap
3. npm install --save-dev grunt-bower-install

4. chỉnh sửa Gruntfile.js - chèn đánh dấu dòng:

   // ... 
   } catch (e) {} 
   
   grunt.loadNpmTasks('grunt-bower-install');    // INSERT 
   
   grunt.initConfig({ 
       yeoman: yeomanConfig, 
       'bower-install': {         // INSERT BEGIN 
        target: {          // . 
         html: '<%= yeoman.app %>/index.html',  // . 
         ignorePath: '<%= yeoman.app %>/'   // . 
        }            // . 
       },             // INSERT END 
       watch: { 
        coffee: { 
         files: ['<%= yeoman.app %>/scripts/{,*/}*.coffee'], 
         tasks: ['coffee:dist'] 
   // ... 
   

5. chỉnh sửa ứng dụng/index.html - chèn:

   <!-- bower:css --> 
   <!-- endbower --> 
   

   và:

   <!-- bower:js --> 
   <!-- endbower --> 
   

   nơi thích hợp - nguồn những sẽ bơm tham chiếu đến Bower quản lý (stylesheet bootstrap và JS trong trường hợp của chúng tôi).

   cập nhật ngày 10/5/2013: Cân nhắc đặt bower:xxx bên trong build:xxx.
   Trong trường hợp của chúng tôi, bower:css bên trong build:css và bower:js bên trong build:js.
   Điều này là cần thiết để giảm thiểu hoạt động khi lắp ráp dist. Tuy nhiên tôi xem xét cách tiếp cận này không hoàn hảo như vậy - xem chú thích dưới đây. Tôi xin lỗi một chút, vì đây là cách rất giống với phiên bản bootstrap thu được bởi Yeoman theo mặc định được bao gồm trong ứng dụng của chúng tôi :-P
   Lưu ý: Để làm việc css minification, bạn cần thay đổi build:css(.tmp) thành build:css({.tmp,app}).

6. grunt bower-install

Ready. Bây giờ chạy máy chủ (grunt server) và Bootstrap 3 sẽ có sẵn.

---

Các chú thích - Cập nhật 2013/10/05 - lấy cảm hứng từ cuộc điều tra @ Luke trong một chú thích:

Dựa trên this tôi đã thêm một tiểu bước để làm cho công việc dist việc rút gọn.

Công trình tiêm của Bower, do đó, giảm thiểu, tuy nhiên tôi không hài lòng với cách tiếp cận này.
Lý do:

1. [nhỏ] Chúng tôi không sử dụng tài nguyên đã minified thu được bằng cách Chòi chơi.
2. Giảm thiểu tất cả các loại CSS/JS thành một tệp SINGLE là một ý tưởng khá lame. Một cách tốt hơn để bao gồm các phụ thuộc bên ngoài trong ứng dụng của bạn sẽ có một chuyển đổi giữa CDN-fetch (dist) và các bản sao cục bộ thu được với bower (dev). Sth như hồ sơ maven.
3. Tùy thuộc vào kích thước ứng dụng, tải xuống tất cả-trong-một tài nguyên, đặc biệt là JavaScripts, sẽ làm chậm cuộc gặp gỡ đầu tiên với ứng dụng của chúng tôi.
   Sau đó phần còn lại của ứng dụng sẽ được tải nhanh hơn, đúng, nhưng lần đầu tiên người dùng vào trang của chúng tôi, những người đơn lẻ đơn lẻ sẽ phải được tải xuống trước.

@yao tony cũng không thấy cách tiếp cận này thú vị - hãy xem câu hỏi được tham chiếu.

Cập nhật tháng 11 năm 2013: Bạn có thể sử dụng nhiệm vụ cdnify của grunt. Đó là mát mẻ

---

phiên bản phần mềm tôi đã sử dụng:

user@machine:~/somewhere $ yo -v; grunt --version; bower -v 
1.0.4 
grunt-cli v0.1.9 
grunt v0.4.1 
1.2.6 

Answer 3

Đối sass Bootstrap update:

này Làm việc cho tôi:

bower install angular-bootstrap 
bower install sass-bootstrap 

và chọn phiên bản mới s của cả hai ...

có lẽ nên thêm một --save

Lưu ý: sass-bootstrap là đậu bị phản đối, bây giờ là một Chòi chơi chính thức cho phiên bản sass của bootstrap https://github.com/twbs/bootstrap-sass nhưng tôi không thử nó.