bootstrap源码分析系列：一，文件结构和开发环境

本文基于bootstrap2.3.2。

一，文件结构：

▾ docs/
  ▸ assets/
  ▸ build/
  ▸ examples/
  ▸ templates/
    base-css.html
    components.html
    customize.html
    extend.html
    getting-started.html
    index.html
    javascript.html
    scaffolding.html
▸ img/
▸ js/
▸ less/
▸ node_modules/
  bower.json
  CHANGELOG.md
  composer.json
  CONTRIBUTING.md
  LICENSE
  Makefile
  package.json
  README.md

文件结构如上所示，其中：
docs：文档，里面其实有两种文档，docs根目录下的是有templates里面的模板编译生成的，examples里面是直接写的html没有用模板。assets目录里面好包括了从根目录copy过去的bootstrap代码（js，css和img）。其中templates下的模板是用mustache写的，mustache是一个通用的无逻辑模板语言，http://mustache.github.io/， 其中js的实现是hogan。
img: 两种sprite icon
js：js源码，这里没有用任何工具解决依赖，是通过在make的时候指定文件顺序来解决模块依赖关系的。
less：less源码，这里有两个入口文件分别是bootstrap和responsive。
bootstrap可以按顺序分成如下几个部分：
1，变量和函数：variables.less,mixins.less
2，重置默认样式：reset.less
3，脚手架：scaffolding.less,grid.less,layout.less
4，基础样式：type.less,form.less,tables.less
5，css组件：btn nav等
6，js组件：popover， dialog

Makefile：make脚本，下面会详细讲

在执行make之后会生成bootstrap目录，里面就是编译后的js和css文件。
2.3和3.0在文件结构上也有些区别：
1，用icon font代替了img
2，用grunt代替了make

二，代码构建工具makefile：

bootstrap使用make脚本构建代码，但是make脚本实际上是调用nodejs，所以仍然需要执行npm install之后才能执行make。
make实际上定义了四种任务：
1，编译源码，包括js和css，输出到bootstrap目录下
2，测试，包括了hint进行语法检查和qunit进行单元测试
3，构建文件，这里包括两个步骤，一是调用npm插件编译mustache模板，二是把必要的文件从根目录拷贝到docs/assets目录下
4，watch

在3.0版本中，make已经被grunt取代了，如果使用2.3但是任然想使用grunt而不是make，可以参考3.0版本的grunt脚本进行修改。等价的Gruntfile.js如下：

/* jshint node: true */exec = require("child_process").exec;module.exports = function(grunt) {  'use strict';  grunt.initConfig({    pkg: grunt.file.readJSON('package.json'),    banner: '/*dpl started*/',    distRoot: 'dist',    docsRoot: 'docs',    clean: {      dist: ['<%= distRoot %>']    },    jshint: {      options: {        jshintrc: 'js/.jshintrc'      },      gruntfile: {        src: 'Gruntfile.js'      },      src: {        src: ['js/*.js']      },      test: {        src: ['js/tests/unit/*.js']      }    },    concat: {      options: {        banner: '<%= banner %>',        stripBanners: false      },      bootstrap: {        src: [          '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-affix.js'        ],        dest: '<%= distRoot %>/js/<%= pkg.name %>.js'      },    },    uglify: {      options: {        banner: '<%= banner %>'      },      bootstrap: {        src: ['<%= concat.bootstrap.dest %>'],        dest: '<%= distRoot %>/js/<%= pkg.name %>.min.js'      }    },    recess: {      options: {        compile: true      },      bootstrap: {        src: ['less/bootstrap.less'],        dest: '<%= distRoot %>/css/<%= pkg.name %>.css'      },      reponsive: {        src: ['less/responsive.less'],        dest: '<%= distRoot %>/css/<%= pkg.name %>-responsive.css'      },      min: {        options: {          compress: true        },        src: ['less/bootstrap.less'],        dest: '<%= distRoot %>/css/<%= pkg.name %>.min.css'      },      minresponsive: {        options: {          compress: true        },        src: ['less/responsive.less'],        dest: '<%= distRoot %>/css/<%= pkg.name %>-responsive.min.css'      }    },    copy: {      docs: { //doc 必须依赖于bootstap.min.js        files: [          { expand: true, src: ['img/*'], dest: '<%= docsRoot %>/assets/' },          { expand: true, src: ['js/*.js'], dest: '<%= docsRoot %>/assets/' },          { expand: true, src: ['fonts/*'], dest: '<%= docsRoot %>/assets/' },          { expand: true, cwd: 'js/test/vendor/', src:['jquery.js'], dest: '<%= docsRoot %>/assets/js/' },          { expand: true, cwd: '<%= distRoot %>/js/', src: ['<%= pkg.name %>.js'], dest: '<%= docsRoot %>/assets/js/' },          { expand: true, cwd: '<%= distRoot %>/css/', src: ['<%= pkg.name %>.css'], dest: '<%= docsRoot %>/assets/css/' }        ]      }    },    qunit: {      options: {        inject: 'js/tests/unit/bootstrap-phantom.js'      },      files: ['js/tests/*.html']    },    connect: {      server: {        options: {          port: 3000,          base: '.'        }      }    },    watch: {      css: {        files: 'less/*.less',        tasks: ['recess']      },      js: {        files: 'js/*.js',        tasks: ['dist-js']      }    }  });  // These plugins provide necessary tasks.  grunt.loadNpmTasks('grunt-contrib-clean');  grunt.loadNpmTasks('grunt-contrib-concat');  grunt.loadNpmTasks('grunt-contrib-connect');  grunt.loadNpmTasks('grunt-contrib-copy');  grunt.loadNpmTasks('grunt-contrib-jshint');  grunt.loadNpmTasks('grunt-contrib-qunit');  grunt.loadNpmTasks('grunt-contrib-uglify');  grunt.loadNpmTasks('grunt-contrib-watch');  grunt.loadNpmTasks('grunt-html-validation');  grunt.loadNpmTasks('grunt-jekyll');  grunt.loadNpmTasks('grunt-recess');  grunt.loadNpmTasks('browserstack-runner');  // Test task.  var testSubtasks = ['dist-css', 'jshint'];  grunt.registerTask('test', testSubtasks);  grunt.registerTask('hogan', 'compile mustache template', function() {    var done = this.async();    var child = exec('node docs/build', function(e) { done(); })  });  // JS distribution task.  grunt.registerTask('dist-js', ['concat', 'uglify']);  // CSS distribution task.  grunt.registerTask('dist-css', ['recess']);  // Full distribution task.  grunt.registerTask('dist', ['clean', 'dist-css', 'dist-js']);  grunt.registerTask('docs', ['dist', 'hogan', 'copy']);  // Default task.  grunt.registerTask('default', ['test', 'dist']);}