2. WEB开发
  3. 编译 Bootstrap 4.0 的坑。

编译 Bootstrap 4.0 的坑。 HTML/CSS

axiuno 10月前 998

Bootstrap 4 Alpha 了6个版本，beta 了2个版本，拖的时间太长了，一直在跟进，最近又尝试编译了一下，发现还是坑多，记录下，前人踩坑，后人乘凉。

中文网站基本不用看了，因为更新太快，版本都落后，直接看英文官网吧。

官网：https://getbootstrap.com/

下载：https://getbootstrap.com/docs/4.0/getting-started/download/  建议用 git clone 的方式。

编译：https://getbootstrap.com/docs/4.0/getting-started/build-tools/  需要安装 node, ruby，会用到 npm gem 包管理方式，吐槽下，一个项目管理搞这么多语言合适么？我认为 node 完全能胜任。然后你最好能翻墙，否则很有可能会卡死。


1. 强烈推荐使用以下 node npm 版本：

    node -v   # 版本 6.11

    npm -v   # 版本 5.2 

    npm install npm@5.2

    （npm 5.3 会有各种坑）


2. npm install bootstrap@4.0.0-beta 没有 Gem 文件，需要直接从 git 下载：

 git clone https://github.com/twbs/bootstrap.git


3. npm 慢如死牛，设置源：

npm config set registry https://registry.npm.taobao.org 


4. ruby 设置源，首先要下载证书，放到 C:\Ruby23\cacert.pem
设置系统环境变量：

set SSL_CERT_FILE=C:\\Ruby23\\cacert.pem


5. 设置 ruby gem 源：

gem sources --remove https://rubygems.org/

gem sources -a https://ruby.taobao.org/

gem sources -l

备用：https://gems.ruby-china.org/ 

bundle config mirror.https://rubygems.org https://gems.ruby-china.org


6. 管理员启动 cmd


7. 重新编译部分模块：

 npm rebuild node-sass


npm cache clear --force

npm install

bundle install

npm run dist


上传的附件：
收藏的用户（0） X
正在加载信息~
最新回复 (13)
  • axiuno 9月前
    引用 2楼

    gem 相关命令：


    gem  sources  --add  https://gems.ruby-china.org/  --remove  https://rubygems.org/
    gem  sources  -l

    sudo  gem  clea
    sudo  gem  install  foundatio
    sudo  npm  install  -g  bower  grunt-cl
    sudo  npm  instal
    grunt  buil
    grunt  /  grunt  serve  /  grunt  watch

  • axiuno 7月前
    引用 3楼
    最近编译  bootstrap  4  beta2  又碰到坑了。
    首先是  ruby  的库文件下载一半锁住后，一直没法继续，需要手工删除一下。
    rm  /c/ruby32/xxxx/xxx.gem

    然后是  npm  install  bootstrap-4@beta-2    的版本有问题，改为  git  clone  后解决了。
    git  clone  --depth=1  https://github.com/twbs/bootstrap.git
    cd  bootstrap
    npm  install
    bundle  install
    npm  run  dist
  • axiuno 6月前
    引用 4楼

    命令顺序如下：但是几乎每步一坑


    git clone https://github.com/twbs/bootstrap.git

    cd bootstrap/

    npm install

    gem install bundler

    bundle install

    npm run dist

    npm test

    npm run docs


  • Chilsion 6月前
    引用 5楼
    不知道Bootstrap  4正式版什么时候才能出来。
  • axiuno 6月前
    引用 6楼
    beta  3  已经出来了，正式版马上出来。
  • Chilsion 6月前
    引用 7楼
    axiuno beta 3 已经出来了，正式版马上出来。
    估计还得有个Beta  4。。。。。。
  • axiuno 6月前
    引用 8楼
    Chilsion 估计还得有个Beta 4。。。。。。
    bs  官方回复说下个版本就  release  了
  • axiuno 5月前
    引用 9楼

    最新的坑：  Ruby  大垃圾需要什么  DevKit：

    下载 DevKit： https://github.s3.amazonaws.com/downloads/oneclick/rubyinstaller/DevKit-tdm-32-4.5.1-20101214-1400-sfx.exe
    解压到  C:/DevKit
    配置  conf.yaml

    -  C:/Ruby2

    执行命令：

    cd  c:/DevKit
ruby  dk.rb  init
ruby  dk.rb  install

    相关讨论：https://github.com/beefproject/beef/issues/1387


    -----------------------------------------------------------------------

    经过摸索，ruby 编译的过程需要安装 make，windows 下通过 npm 安装一下：

    npm install make -g
gem install http_parser.rb -v '0.6.0'
bundle install

    终于过去了，忍不住骂一句：瓦特的法克

  • kimwang 5月前
    引用 10楼
    其实想建议弃坑，BS太粗大了，就像Zend  Framework一样，而且BS对比现在的很多前端框架已经不算惊艳。
  • 真帅 5月前
    引用 11楼
    非常建议扔掉Bootstrap  ，自己原创UI，方为王道
  • 风刀 5月前
    引用 12楼
    看到后端在搞前端的路上一步一坑的哭爹喊娘最有趣了。。。赶紧出正式版吧，重写一个
  • A-神话 5月前
    引用 13楼
    前端真不是那么重要，你们可以回想一下谷歌，百度，淘宝，这些有名的网站，在最初的时间页面有多丑，都是边走边完善的。本身xiuno页面都不多，非得搞得那么复杂和臃肿，其实意义并不大。
返回
发新帖