Twitter bootstrap сделать из источника
Итак, я пытаюсь "построить" twitter bootstrap из источника git://github.com/twitter/bootstrap.git и я git клонировать его на мою локальную машину.
Очевидно, что на моей локальной машине у меня установлены nodejs и npm, а также необходимые пакеты node и uglify-js. И все модули node находятся в моем системном пути, поэтому в моем терминале доступны команды "lessc" и "uglifyjs".
Переходя в корневой каталог bootstrap, я запускаю "make", и это результат: -
(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/
Что мне делать дальше, чтобы включить мои файлы css на моей странице html? Я не вижу, где находятся созданные/созданные файлы bootstrap.min.css или bootstrap.min.responsive. Единственное, что, казалось, изменилось, это то, что был создан "bootstrap.zip", как видно из состояния git выше.
(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")
Ответы
Ответ 1
Не эксперт по этому поводу из-за какой-либо части воображения (просто начал играть с бутстрапом Twitter), но я получаю аналогичный вывод, как вы, когда я просто запускаю make
. Однако, если вы запустите make bootstrap
, он генерирует папку под названием bootstrap
, которая содержит скомпилированный css, насколько я могу судить:
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
Новый каталог bootstrap
(bootstrap/bootstrap
) содержит следующее:
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
Это может быть проблема с документацией, не учитывая правильную команду, но я не уверен. Моя память о том, как работает Makefile
, если вы выдаете make
без целевого объекта, по умолчанию используется первая цель в make файле. В этом случае эта цель docs
вместо bootstrap
.
Я думаю, что вы можете просто скопировать содержимое нового загрузочного каталога туда, где вы обычно добавляете ресурсы css/js для своего проекта.
Ответ 2
Если кто-то ищет альтернативу make
для создания Bootstrap (тем более, что make
не поддерживает Windows), существует система сборки для Bootstrap с Grunt.js
По большей части он дает те же результаты, что и makefile
. Задача grunt-contrib-qunit добавит лучшую поддержку qunit/phantomjs при выпуске grunt 0.4.0 (здесь: https://github.com/gruntjs/grunt-contrib-qunit). До тех пор вы можете работать со встроенными задачами Grunt для тестирования.
Ответ 3
Это может быть удобно для некоторых из вас. См. Readme для использования/параметров. Его простая партия для компиляции бутстрапа из исходного кода в Windows. https://github.com/chazelton/bootstrap. Вы также можете просто захватить "make.bat", если хотите, и поместить его в загруженный источник. Он предназначен для удобства. Основное использование ниже
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)
См. дополнительные параметры в readme на GitHub...
ПРИМЕЧАНИЕ: требуется, чтобы UglifyJs и Less устанавливались через npm по всему миру, поэтому = > npm установить less -g. Пакет подскажет вам, если они отсутствуют. Однако вам нужно будет установить их вручную.
Ответ 4
У меня установлен gnuwin32 и на моем пути, и у меня есть npm install
-ed uglifyjs
, recess
и jshint
. Затем я сделал следующие дополнения к началу файла Makefile:
SHELL=c:/windows/system32/cmd.exe
MKDIR=mkdir.exe -p
UGLIFYJS=uglifyjs
RECESS=recess
JSHINT=jshint
Первая строка (SHELL =) устраняет эту проблему:
w:\github\bootstrap>make bootstrap
mkdir.exe -p bootstrap/js
make: Interrupt/Exception caught (code = 0xc00000fd, addr = 0x4227d3)
вторая строка (MKDIR =) предназначена для предотвращения использования команды dos mkdir (которая не понимает флаг -p
).
Затем глобальный поиск/замена всех исполняемых ссылок:
- mkdir -p bootstrap/js
+ $(MKDIR) bootstrap/js
cat js/bootstrap-transition.js js..
- ./node_modules/.bin/uglifyjs -nc...
+ $(UGLIFYJS) -nc bootstrap/js/boot..
etc.
Теперь make bootstrap
заканчивается без проблем.
Ответ 5
Сначала загрузите несколько пакетов node
Попробуйте
sudo npm install recess
а затем
sudo npm install jshint
Затем используйте
make bootstrap
в каталоге MakeFile