Bootstrap源码之旅-CSS环境搭建

本文内容：
- 下载Bootstrap源代码
- 熟悉目录结构
- 创建自己的空项目
- 摘录Bootstrap源码中grunt的less编译代码

下载Bootstrap源代码

开源的，托管在github上。那就去github上去下载呗！

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

熟悉目录结构

来自Bootstrap官网

bootstrap/
├── less/
├── js/
├── fonts/
├── dist/
│   ├── css/
│   ├── js/
│   └── fonts/
└── docs/
    └── examples/

这是源码的目录结构。

• less: 样式文件源码
• js: 脚本文件的源码
• fonts:图标文件的目录
• docs:帮助文档的目录，用jekyll才能运行起来，闲的话可以自己搞起来
• dist: 编译压缩后的代码，生产上需要所有的东西都在这里了

下面是dist目录的显微镜视图^_^:

dist/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.css.map
│   ├── bootstrap.min.css
│   ├── bootstrap.min.css.map
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.css.map
│   ├── bootstrap-theme.min.css
│   └── bootstrap-theme.min.css.map
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
└── fonts/
    ├── glyphicons-halflings-regular.eot
    ├── glyphicons-halflings-regular.svg
    ├── glyphicons-halflings-regular.ttf
    ├── glyphicons-halflings-regular.woff
    └── glyphicons-halflings-regular.woff2

同样来自Bootstrap官网（我是很尊重版权的，万一他们找我麻烦怎么办:-)）

创建自己的空项目

建一个空目录，命令行中cd到这个目录。然后执行

## mkdir mybootstrap
## cd mybootstrap
npm init -y

Bootstrap使用grunt来构建它的项目。我们也没必要自己再写套Gulp的了，这不是自己找事情吗？如果有人喜欢用Webpack，请便（嘻嘻）。
为了能够在这里面使用grunt，我们需要先安装一个全局的grunt-cli，然后再安装一个本地的grunt。

npm install -g grunt-cli
npm install --save-dev grunt

接下来要从Bootstrap源码中的Gruntfile.js文件中拷贝出我们需要的编译less文件的配置了，别的就先不要吧，毕竟那么复杂，万一出问题了都不会改！！

module.exports = function(grunt){
  'use strict';

  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    less:{
      compileCore:{
        options:{
          strictMath: true,
          sourceMap: true,
          outputSourceFiles: true,
          sourceMapURL: '<%= pkg.name %>.css.map',
          sourceMapFilename: 'dist/css/<%= pkg.name %>.css.map'
        },
        src:'less/bootstrap.less',
        dest:'dist/css/<%= pkg.name %>.css'
      }
    }
  });

  grunt.loadNpmTasks('grunt-contrib-less');

  grunt.registerTask('default',['less:compileCore']);  
}

这是从Bootstrap中的Gruntfile.js文件摘抄的，稍微做了点修改，希望没有违反哪个未知的法律吧。
其中我们可以看到需要grunt-contrib-less这个插件来编译less文件，还有什么好说的安装包呗

npm i --save-dev grunt-contrib-less

在这里插一句，两三年第一次见到grunt，感觉这个工具太棒了。这一年多用gulp，现在再看grunt。总觉得initConfig中的东西咋那么扎眼呢？我发现自己怎么那么多事，你管人家干啥，工具是拿来用的，能用不就好了。

经过这番思考，npm也算把grunt-contrib-less给我装好了。伟大的中国的网络想要使用npm还真是考验耐心的。幸好有传说中的cnpm！

接下来要干最后一件事情了，创建less目录，并在其中创建bootstrap.less文件。不要问我为什么是bootstrap.less文件，名字能变不？能变，但是首先要改上面的grunt的代码了，不想改，就用bootstrap.less最为入口文件吧。

mkdir less
cd less
echo body{} > bootstrap.less #多么希望有个touch命令能创建文件呀

然后就可以在命令行执行grunt来执行less编译了，请确保命令行在项目的根目录！！
命令执行完成后发现目录里面多了个dist目录，下面有css。再里面就是一个css文件和对应的sourcemap文件了。。Bootstrap源码之旅从此开始了。。。

突然发现，文章开头写了四个section，最终让我搞丢了一个，算啦，内容不少就好。作文差挂我咯^^