bootstrap 4 搭建绿色编译环境 本地文档 重新编译

作者非专业人员，本文章仅适用于新手，仅供参考。如果我的文章有问题，请帮我留言，我好及时改正。

bootstrap 是使用webpack构建的。

webpack它是一个前端构建工具，能打包代码、压缩代码、源码合并等。用我的土话说：webpack他的一个主要功能能把js、css源代码打包成适合在项目里使用的 .min.js文件，特点是体积小，易于加载。项目里引用的bootstrap.min.js就是这么来的。

webpack 是NODEJS的组件。

bootsrap的文档系统是基于jekyll构建的，jekyll又是基于Ruby的组件。

因此想在windows上体验全部功能，以上环境是必须搭建的。

需要搭建NODEJS后添加webpack组件；搭建Ruby后添加jekyll组件；

如果不想在本地看文档，那么可以不搭建Ruby环境与jekyll组件。

 

1、下载bootstrap 4.2.1源码

访问 https://github.com/twbs/bootstrap/ 

Tags 选择 V4.2.1  然后 Clone or download  下载zip，或者使用git下载。

最后得到： bootstrap-4.2.1.zip

2、下载NODEJS

由于说要使用绿色环境，那么，就下载windows zip版本的。

访问 英文官网 https://nodejs.org/en/download/

直连地址：https://nodejs.org/dist/v10.15.0/node-v10.15.0-win-x64.zip

或者使用其他下载地址：

• http://nodejs.cn/download/
• https://npm.taobao.org/

最后得到：node-v10.15.0-win-x64.zip

3、下载Runy 

我们的目的是使用jekyll，安装官网https://jekyllrb.com/docs/installation/windows/的说明 进行操作。

下载此带devkit版本的

https://rubyinstaller.org/downloads/

直连地址：

https://github.com/oneclick/rubyinstaller2/releases/download/rubyinstaller-2.5.3-1/rubyinstaller-devkit-2.5.3-1-x64.exe

如果是rubyinstaller-devkit-2.6.0-1-x64.exe 这个版本，好像是不行。

下载带Devkit版本的，就不用再次加载Devkit环境

最后得到：rubyinstaller-devkit-2.5.3-1-x64.exe

 4、目录规划

出于谨慎的原则，项目中用到的，我都会留一份原始文件。由于此环境专为构建Bootstrap搭建，因此不利用现有的Nodejs等其他环境，而是重新部署一套专门用于构建它的环境。以求环境稳定。修改过程中，最简单的方法就是打个压缩包，就可以备份了。当然，你也可以把修改后的代码提交svn git等。

首先创建根目录，以及把下载的2个文件解压缩。

D:\UIDE\BootstrapDev\ 是根本次的根

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64 NODEJS所在环境

D:\UIDE\BootstrapDev\Ruby25-x64  Ruby所在目录

D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1  在工作区内，4.2.1版本的项目所在。和他并列的可以存在其他版本。

5、NODEJS的部署安装

简单测试：

解压缩后，NODEJS即可开始工作，CMD进入到NODEJS所在目录查看是否可用。

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>node -v
v10.15.0

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm -v
6.4.1

可以看到 node -v 和 npm -v 都有对应版本输出。

创建两个目录：

node-global :npm全局安装位置； node-cache：npm 缓存路径

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-cache  缓存路径

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-global  全局组件安装目录

 设置NODEJS：

各命令还是需要在NODEJS的跟目录下运行。

设置node-global :npm全局安装位置 

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm config set prefix  "D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-global"

设置node-cache：npm 缓存路径

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm config set  cache "D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-cache"

设置国内访问的npm镜像（可加快下载速度），使用cnpm代替。其他方式参考：他的博客，有三种方式使用国内镜像

本案例使用cnpm主要是不与原NPM冲突。输入下面命令后，由于是-g安装会在node-global文件夹下下载并部署cnpm。

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm install -g cnpm --registry=https://registry.npm.taobao.org

cmd窗口不要关闭，接下来安装：webpack

6、WEBPACK的部署安装

使用npm官方镜像安装：

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>npm i -g webpack

或者使用cnpm的国内镜像安装：

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>SET PATH=D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-global

D:\UIDE\BootstrapDev\node-v10.15.0-win-x64>cnpm i -g webpack

因为cnpm刚才全局安装到node-global 因此需要把它加入到path里面，才能执行cnpm命令。

7、Ruby 安装与配置

安装：

为了避免冲突 没有让他设置环境变量↑

 

设置国内资源：

如果 官网资源不能加载，请使用国内资源，需要在Ruby下的bin目录下执行。或把它加到环境变量。并检测：

D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem sources --add https://gems.ruby-china.com/ --remove https://rubygems.org/
输出结果：
https://gems.ruby-china.com/ added to sources
https://rubygems.org/ removed from sources

D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem sources -l
输出结果：
*** CURRENT SOURCES ***
https://gems.ruby-china.com/

更新gem 否则下面有时会报错。 

D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem update --system

 

8、在Ruby里安装jekyll

https://jekyllrb.com/docs/installation/windows/ 中的命令执行 gem install jekyll bundler  表示 安装jekyll、bundler 这两个组件。

D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem install jekyll bundler 

相当于 他们的组合：

D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem install jekyll
D:\UIDE\BootstrapDev\Ruby26-x64\bin>gem install bundler 

升级： 如果版本是最新，则不用再更新。

D:\UIDE\BootstrapDev\Ruby25-x64\bin>gem update bundler
输出：
Updating installed gems
Nothing to update

D:\UIDE\BootstrapDev\Ruby25-x64\bin>bundler -v
输出：
Bundler version 2.0.1

完成下载后，在 D:\UIDE\BootstrapDev\Ruby25-x64\bin下面出现 jekyll

使用命令查看。

D:\UIDE\BootstrapDev\Ruby25-x64\bin>jekyll -v
输出：
jekyll 3.8.5

9、绿色环境其实就是手动设置环境变量

cmd中手动配置环境变量，以下操作需要先把环境变量设置到cmd，cmd关闭后失效。

D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>set path=D:\UIDE\BootstrapDev\node-v10.15.0-win-x64;D:\UIDE\BootstrapDev\node-v10.15.0-win-x64\node-global;D:\UIDE\BootstrapDev\Ruby25-x64\bin

D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>set GEM_HOME=D:\UIDE\BootstrapDev\Ruby25-x64

 

10、初始化Bootstrap4项目

cmd 进入Bootstrap项目文件夹下

cd D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1

执行各命令。

首先加载npm依赖：

D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>npm install   会把Bootstrap依赖下载到项目文件夹

加载依赖Ruby相关依赖，一定要在bootstrap跟目录下执行。

D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>bundle install

查看Bootstrap项目给我们提供了什么命令

D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>npm run

开始Bootstrap吧：

D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>npm run start

观察控制台，会输出很长，观察输出中，有一下信息，然后使用浏览器访问地址，就可以看到文档信息啦。

 Auto-regeneration: enabled for 'site'
    Server address: http://localhost:9001/

修改源码后重新编译，dist目录下，就是生产的文件。

D:\UIDE\BootstrapDev\workspace\bootstrap-4.2.1>npm run dist

问题

 

 

 

bootstrap4学习网站

• http://www.runoob.com/   
• https://cloud.tencent.com/developer/devdocs
• https://www.w3cschool.cn/bootstrap4/
• https://v3.bootcss.com/getting-started/ (3版本)