Bootstrap源码之旅-CSS环境搭建
来源:互联网 发布:aop切面编程 android 编辑:程序博客网 时间:2024/06/05 08:15
本文内容:
- 下载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 mybootstrapnpm init -y
Bootstrap使用grunt来构建它的项目。我们也没必要自己再写套Gulp的了,这不是自己找事情吗?如果有人喜欢用Webpack,请便(嘻嘻)。
为了能够在这里面使用grunt,我们需要先安装一个全局的grunt-cli,然后再安装一个本地的grunt。
npm install -g grunt-clinpm 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 lesscd lessecho body{} > bootstrap.less #多么希望有个touch命令能创建文件呀
然后就可以在命令行执行grunt来执行less编译了,请确保命令行在项目的根目录!!
命令执行完成后发现目录里面多了个dist目录,下面有css。再里面就是一个css文件和对应的sourcemap文件了。。Bootstrap源码之旅从此开始了。。。
突然发现,文章开头写了四个section,最终让我搞丢了一个,算啦,内容不少就好。作文差挂我咯^^
- Bootstrap源码之旅-CSS环境搭建
- Bootstrap源码之旅-再论CSS环境搭建
- Web前端——bootstrap源码定制之环境搭建
- Bootstrap初入之环境搭建
- Bootstrap源码之旅-开始
- Bootstrap源码之旅-variables
- bootstrap环境搭建
- bootstrap环境搭建
- bootstrap 之 css
- bootstrap 之 CSS样式
- bootstrap 之 CSS样式
- 001-bootstrap学习起步,搭建bootstrap环境。
- 深入elasticsearch源码之环境搭建
- Java之Spring源码学习 - 环境搭建
- spring 源码分析之环境搭建
- Android源码编译教程之环境搭建
- Netty 源码阅读之初始环境搭建
- Bootstrap源码之旅-mixins解读(1)
- UVA 11800 Determine the Shape
- php中property_exists方法的理解
- SONY·ILCE-6300L/BCN2·购买清单
- TASKCTL4.1集群与负载均衡部署过程
- hbase性能调试
- Bootstrap源码之旅-CSS环境搭建
- SwipeRefreshLayout与webview冲突解决方案
- 2017 Multi-University Training Contest
- 断点续传分析及实现
- 微信小程序中根据字母选择城市
- Shell常用命令
- java 异常收集
- IOC容器学习篇
- bootstrap常用语法