twitter bootstrap làm từ nguồn

Question

Vì vậy, tôi đang cố gắng để "xây dựng" twitter bootstrap từ nguồn git: //github.com/twitter/bootstrap.git và tôi git clone nó vào máy địa phương của tôi.

Rõ ràng, trên máy cục bộ của tôi, tôi đã cài đặt nodejs và npm và các gói nút yêu cầu ít hơn và uglify-js được cài đặt. Và tất cả các mô-đun nút nằm trong đường dẫn hệ thống của tôi vì vậy các lệnh "lessc" và "uglifyjs" có sẵn trong terminal của tôi.

Đi sâu vào thư mục gốc bootstrap, tôi chạy "làm" và đây là kết quả: -

(luc)calvins-MacBook.local ttys002 Fri Feb 03 10:51:29 |~/work/luc/static/bootstrap| 
calvin$ make 
mkdir -p bootstrap/img 
mkdir -p bootstrap/css 
mkdir -p bootstrap/js 
cp img/* bootstrap/img/ 
lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css 
lessc --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css 
lessc ./less/responsive.less > bootstrap/css/bootstrap.responsive 
lessc --compress ./less/responsive.less > bootstrap/css/bootstrap.min.responsive 
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js 
uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.js 
zip -r docs/assets/bootstrap.zip bootstrap 
updating: bootstrap/ (stored 0%) 
updating: bootstrap/css/ (stored 0%) 
updating: bootstrap/css/bootstrap.css (deflated 85%) 
updating: bootstrap/css/bootstrap.min.css (deflated 84%) 
updating: bootstrap/css/bootstrap.min.responsive (deflated 76%) 
updating: bootstrap/css/bootstrap.responsive (deflated 79%) 
updating: bootstrap/img/ (stored 0%) 
updating: bootstrap/img/glyphicons-halflings-white.png (deflated 4%) 
updating: bootstrap/img/glyphicons-halflings.png (deflated 4%) 
updating: bootstrap/js/ (stored 0%) 
updating: bootstrap/js/bootstrap.js (deflated 82%) 
updating: bootstrap/js/bootstrap.min.js (deflated 74%) 
rm -r bootstrap 
lessc ./less/bootstrap.less > ./docs/assets/css/bootstrap.css 
lessc ./less/responsive.less > ./docs/assets/css/bootstrap-responsive.css 
node docs/build 
cp img/* docs/assets/img/ 
cp js/*.js docs/assets/js/ 
cp js/tests/vendor/jquery.js docs/assets/js/ 
cp js/tests/vendor/jquery.js docs/assets/js/ 

Tôi nên làm gì tiếp theo để bao gồm các file css của tôi trong trang html của tôi? Tôi không thấy nơi các tập tin bootstrap.min.css hoặc bootstrap.min.responsive được tạo/được tạo. Điều duy nhất dường như đã thay đổi là một "bootstrap.zip" đã được tạo ra, như được thấy bằng cách chạy trạng thái git ở trên.

(luc)calvins-MacBook.local ttys002 Fri Feb 03 10:51:35 |~/work/luc/static/bootstrap| 
calvin$ git status 
# Not currently on any branch. 
# Changes not staged for commit: 
# (use "git add <file>..." to update what will be committed) 
# (use "git checkout -- <file>..." to discard changes in working directory) 
# 
# modified: docs/assets/bootstrap.zip 
# 
no changes added to commit (use "git add" and/or "git commit -a") 

Answer 1

Không một chuyên gia về vấn đề này bởi bất kỳ căng của trí tưởng tượng (chỉ mới bắt đầu để chơi xung quanh với Twitter bootstrap cũng), nhưng tôi nhận được một kết quả tương tự như bạn khi tôi chỉ cần chạy make. Tuy nhiên, nếu bạn chạy make bootstrap nó tạo ra một thư mục có tên bootstrap chứa css biên soạn như xa như tôi có thể nói:

make bootstrap 
mkdir -p bootstrap/img 
mkdir -p bootstrap/css 
mkdir -p bootstrap/js 
cp img/* bootstrap/img/ 
lessc ./less/bootstrap.less > bootstrap/css/bootstrap.css 
lessc --compress ./less/bootstrap.less > bootstrap/css/bootstrap.min.css 
lessc ./less/responsive.less > bootstrap/css/bootstrap-responsive.css 
lessc --compress ./less/responsive.less > bootstrap/css/bootstrap-responsive.min.css 
cat js/bootstrap-transition.js js/bootstrap-alert.js js/bootstrap-button.js js/bootstrap-carousel.js js/bootstrap-collapse.js js/bootstrap-dropdown.js js/bootstrap-modal.js js/bootstrap-tooltip.js js/bootstrap-popover.js js/bootstrap-scrollspy.js js/bootstrap-tab.js js/bootstrap-typeahead.js > bootstrap/js/bootstrap.js 
uglifyjs -nc bootstrap/js/bootstrap.js > bootstrap/js/bootstrap.min.js 

Các bootstrap thư mục mới (bootstrap/bootstrap) chứa sau:

bootstrap/css: 
- bootstrap-responsive.css 
- bootstrap-responsive.min.css 
- bootstrap.css 
- bootstrap.min.css 

bootstrap/img: 
- glyphicons-halflings-white.png 
- glyphicons-halflings.png 

bootstrap/js: 
- bootstrap.js 
- bootstrap.min.js 

này có thể là một vấn đề với tài liệu, để lại lệnh đúng, nhưng tôi không chắc chắn. Bộ nhớ của tôi về cách hoạt động của Makefile là nếu bạn phát hành make mà không có mục tiêu, nó mặc định là đích đầu tiên trong makefile. Trong trường hợp này, mục tiêu đó là docs thay vì bootstrap.

Tôi nghĩ rằng bạn có thể chỉ cần sao chép nội dung của thư mục bootstrap mới đến bất cứ nơi nào bạn thường đặt tài sản css/js cho dự án của bạn.

Answer 2

Nếu bất cứ ai đang tìm kiếm một thay thế cho make để xây dựng Bootstrap (đặc biệt là kể từ khi make không phải là Windows thân thiện), có một build system for Bootstrap with Grunt.js

Đối với hầu hết các phần nó tạo ra kết quả tương tự như makefile. Nhiệm vụ grunt-contrib-qunit sẽ thêm hỗ trợ tốt hơn cho qunit/phantomjs khi grunt 0.4.0 được phát hành (tìm thấy ở đây: https://github.com/gruntjs/grunt-contrib-qunit). Cho đến lúc đó bạn vẫn có thể làm việc với các tác vụ Grunt được xây dựng để thử nghiệm.

Answer 3

Tôi đã cài đặt gnuwin32 và trên đường dẫn của mình và tôi đã npm install -ed uglifyjs, recess và jshint. sau đó tôi đã bổ sung sau để phía trên cùng của Makefile:

SHELL=c:/windows/system32/cmd.exe 
MKDIR=mkdir.exe -p 
UGLIFYJS=uglifyjs 
RECESS=recess 
JSHINT=jshint 

Dòng đầu tiên (SHELL =) sửa chữa vấn đề này:

w:\github\bootstrap>make bootstrap 
mkdir.exe -p bootstrap/js 
make: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x4227d3) 

dòng thứ hai (mkdir =) là để ngăn chặn các dos lệnh mkdir đang được sử dụng (không hiểu cờ -p).

Sau đó, một tìm kiếm toàn cầu/thay thế trên tất cả các tài liệu tham khảo thực thi:

-  mkdir -p bootstrap/js 
+  $(MKDIR) bootstrap/js 
     cat js/bootstrap-transition.js js.. 
-  ./node_modules/.bin/uglifyjs -nc... 
+  $(UGLIFYJS) -nc bootstrap/js/boot.. 
etc. 

Bây giờ make bootstrap kết thúc mà không cần bất kỳ vấn đề.

Answer 4

Điều này có thể hữu ích cho một số bạn. Xem Readme để biết cách sử dụng/tùy chọn. Một lô đơn giản của nó để biên dịch bootstrap từ nguồn trên Windows. https://github.com/chazelton/bootstrap. Bạn cũng có thể chỉ cần lấy "make.bat" nếu bạn thích và thả nó vào nguồn tải xuống của bạn. Nó được chia ra ở đây để thuận tiện. sử dụng cơ bản dưới đây

C:\projects\bootstrap>make (would create sub dir "build" with css, js, img dirs) 
C:\projects\bootstrap>make -c (combines bootstrap/responsive to one file) 
C:\projects\bootstrap>make -l (outputs source less files under css dir) 

Xem thêm các tùy chọn trong readme trên GitHub ...

GHI CHÚ: yêu cầu UglifyJs và ít phải được cài đặt thông qua NPM trên toàn cầu nên => NPM cài đặt ít -g. Lô sẽ nhắc bạn nếu chúng bị thiếu. Tuy nhiên, bạn sẽ cần cài đặt chúng theo cách thủ công.

Answer 5

Bạn nên tải về một số gói nút đầu tiên

Hãy thử

sudo npm install recess 

và sau đó

sudo npm install jshint 

Sau đó sử dụng

make bootstrap 

trong thư mục của Makefile