BootStrap 是一个前端CSS框架，它提供了一些便捷的组件方便我们快速构建前端页面，目前已经到了版本4，版本4是用 Sass 编写的，版本3是由 Less 编写的，后来增加了 Sass 版本。这说明了什么？BootStrap 已经向 Sass靠近了，个人感觉 Sass 比 Less 更为强大，具有更丰富的语法功能。
所以，Sass 将会成为比 Less 更为主流的语言。
目前常用的 BootStrap 版本是3，在官网也提供了相关 Sass 版本的下载。
在此提供官网下载链接和 Sass 项目 GitHub 地址。
在 BootStrap 的下载版本中，可以看到有三个。一个是编译好的 JS，CSS 文件，可以直接拿来用，方便快捷就可以下载这个来用。第二个是 Less 源码版本，你可以自己定义 Less 文件，在项目基础上继续用 Less 开发，编译成需要的 CSS 文件。第三个是后来新增的 Sass 版本，本节就以它为例来说明利用 Gulp 编译 BootStrap-Sass 的过程，目的一在于熟悉 Gulp 自动化编译 Sass 的流程，目的二在于了解前端自动化的工作原理。
说完 BootStrap，我们再说下 Gulp，基于 Node.js。它干嘛的呢？就是一个前端自动化工具，什么用处？比如它可以编译 Less，Sass 生成到指定目录文件为 CSS，生成对应 map 文件，可以生成 JavaScript 的 map 文件，自动更新 html 中的 JS，CSS 引用路径，合并多个 JS，CSS 文件为统一整体，最小化压缩 JS，CSS 文件等等，最终目的呢？自动化替代重复劳动，提高效率。
说到 Gulp，就不得不提到它的竞争对手 Grunt，它具有和 Gulp 几乎一样的功能，然而 Grunt 有几个缺点，比如插件职责不明确，产生大量临时文件，语法繁琐等等。相比之下，Gulp插件职责明确，基于流式，不会产生临时文件，语法简单。冲着这几点，果断选择 Gulp。
利用 Gulp，我们就可以在项目中定义一个 gulpfile.babel.js 里面写入需要执行的任务，命令行执行 gulp 命令就可以完成自动化，一些重复的无聊的工作就不要你来做了。
说完 Gulp，然后就属 ES6 了，它是 ECMAScript 6 的简称，是 JavaScript 的一个新的版本类型，由于是 2015年发布的，所以也可以叫它 ES2015。我们之前编的 JavaScript 大多数是基于ES5或之前的版本，在 ES6 的基础上增加了许多新的语法特性，比如 Class，let，const 等等。
在 ES5 中，Gulp 的执行文件叫做 gulpfile.js，到了 ES6中，它就叫做 gulpfile.babel.js 了，多了一个 badel，那 babel 又是什么？
关于 ES6 的新特性预览可以看
Babel 其实是一个 JavaScript 编译器，支持 ES6，你可以用新型的 ES6 语法来编写你的 JavaScript，Babel 会为你生成对应的 ES5 的 JavaScript。乍看之下并没有什么关系，所以在这里你可以把 babel 看作 ES6 的代名词，在 Gulp 中，新型的 ES6 语法的 JavaScript 的 gulpfile 名字命名为 gulpfile.babel.js。
有一点 Node.js 基础的想必都知道这一个东西吧，Node Package Manager，Node.js 包管理器，利用它你可以安装 Node.js 的相关包，其中包括 Gulp。可以全局安装，加个 -g 参数，可以局部安装，需要路径下有个 package.json。
NPM怎样安装？安装了 Node.js 就好了。
如果觉得速度慢，可以安装 CNPM，镜像源来源非国外，是淘宝的一个镜像源，速度快。
在这里还需要用到一个工具 bower，类似 NPM，算是前端的一些组件管理工具，一些前端库比如 jquery，bootstrap 等等都可以用 bower 这个工具来下载，需要在根目录下建立一个 bower.json 和 .bowerrc 文件。利用 bower 我们就可以方便地管理前端的工具包了，不用我们去手动下载复制粘贴之类的。
在这再安利一个 IDE 吧，WebStorm，JetBrains公司出的一款强大又良心的编写前端的 IDE，支持各种插件，具有强大的语法提示，支持 JsHint 等代码检查，集成了终端，Git 等等强大的工具，Web 开发不二选择，推荐最新版本。
扯完以上东西（其实还有好多没有扯完），让我们进入正题吧，正题是什么？哦没错，那就是
基于 ES6 语法使用 Gulp 编写 gulpfile.babel.js 来编译 BootStrap-Sass 源码。
下面是一些准备工作，没有做好的小伙伴请按照步骤一一完成。
从 Node 的官网下载 Node 并安装，安装流程不详细说明，安装完成之后 NPM 随之就会安装成功。
命令行下输入 npm 检查一下是否可以正常运行。
npm install -g gulp
加入 -g 参数是全局安装，安装完成之后你可以在任意位置使用命令。
npm install -g bower
依然是全局安装 bower。
可直接进入
页面点击第三个下载 Sass 源码。
也可以用 Git 将
的项目 clone 下来。
推荐使用 WebStorm，可以开启 JsHint 等检测工具，具有强大的代码提示功能，不过不使用也没关系。
在你的 IDE 打开下载的项目，
gulpfile.babel.js 是基于 ES6 的 Gulp 处理文件，新建它，稍后所有的工作都在这里完成。
新建 .babelrc 文件，内容
{
"presets": [
"es2015"
]
}这是指定 gulp 使用最新标准的 JavaScript 进行编译。
新建 .bowerrc 文件，这是 bower 的配置文件，可以指定路径等相关配置，内容为
{
"directory": "bower_components"
}这是指定 bower 工具下载前端组件时会默认下载到这个文件夹中。
可以精简 bower.json 文件，比如修改名称，删去 main，ignore 配置等。
比如精简成
{
"name": "bootstrap-sass-demo",
"authors": [
"Germey"
],
"description": "bootstrap-sass is a Sass-powered version of Bootstrap, ready to drop right into your Sass powered applications.",
"moduleType": "globals",
"keywords": [
"twbs",
"bootstrap",
"sass"
],
"license": "MIT",
"dependencies": {
"jquery": ">= 1.9.0"
}
}
转载请注明：静觅 » 基于ES6利用Gulp编译BootStrap-Sass源码