gulp v4编译Bootstrap-sass v3.3.7

准备工作

本文以bs简称Bootstrap。

虽说IE8在国外过时了，但是bs v4不支持IE8，在国内的PC平台上绝对不能忍，所以我依然在用bs v3。由于Less过时了，SASS是未来的主流，所以我选择了SASS版本。bs官网提供了源码下载，也可以npm install bootstrap-sass下载，不多说。

官方并没有用构建工具比如grunt或者gulp来编译scss，只是用Compass编译，Compass这个框架也过时了，你要知道前端圈里的很多工具和框架，你还没学习，它就他妈的已然过时，前端圈就是这么霸气。然后，grunt也他妈过时了，所以我用gulp编译bs。为了不让自己再他妈过时，我直接用gulp 4 beta 2版。

然而，坦白说，其实gulpfile.js也过时了，科学讲，应该借助ES2015的红利，用上gulpfile.babel.js，但我实在不想再增加复杂度，所以还是用gulpfile.js吧。

首先，看看官方github主页 https://github.com/twbs/bootstrap-sass 的Readme的Configuration一章。它总共说了下面几个事情：

一、Sass

读完之后，我的做法是把assets\stylesheets\里面的_bootstrap.scss复制一份命名为bootstrap-custom.scss，将来编译它就好了。

二、Sass: Number Precision

数字精度的问题，从默认的数字精度5改成8。由于我用的gulp插件是gulp-sass，它有个设置项是precision，设为8就行了。

三、Sass: Autoprefixer

我用的前缀插件是gulp-autoprefixer，让browsers设置项设为[ "Android 2.3", "Android >= 4", "Chrome >= 20", "Firefox >= 24", "Explorer >= 8", "iOS >= 6", "Opera >= 12", "Safari >= 6"]即可。

四、JavaScript

官方要求按正确的顺序合并js文件，也就是这个顺序。官方还提到了两个Ruby环境的组件打包工具，但其实没必要管，我们只需要在gulp.src()的参数中按顺序书写文件名就可以了。

五、Fonts

这里的Fonts指的是图标字体，也就是glyphicons-halflings-regular图标字体。关于字体，其实就是涉及@font-face {src: url("../fonts/bootstrap/glyphicons-halflings-regular.eot")}的路径问题。首先我把assets\fonts\bootstrap\文件夹复制一份到发布环境，确定好路径，然后剩下就是在重置变量$icon-font-path的值。由于开发环境和发布环境的路径可能不一样，所以可以用gulp-replace批量替换一下发布环境用到的css的内容即可。

我的实践

1、下载v3.3.7。
2、把_bootstrap.scss复制一份命名为bootstrap-custom.scss。我们的原则是只添加新文件，不修改源文件。
3、cnpm install gulp-sass gulp-autoprefixer gulp-replace ... 安装好所有的包。
4、适应gulp 4的gulpfile.js如下：

// Gulp 4.0版本

'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    cleanCss = require('gulp-clean-css'),
    rename = require('gulp-rename'),
    concat = require('gulp-concat'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify'),
    replace = require('gulp-replace');

function buildcss() {
    return gulp.src(['assets/stylesheets/bootstrap-custom.scss'])
        .pipe(sass({
            precision: 8
        }))
        .pipe(autoprefixer({
            browsers: [
                "Android 2.3",
                "Android >= 4",
                "Chrome >= 20",
                "Firefox >= 24",
                "Explorer >= 8",
                "iOS >= 6",
                "Opera >= 12",
                "Safari >= 6"
            ]
        }))
        .pipe(sourcemaps.init())
        .pipe(cleanCss())
        .pipe(sourcemaps.write('maps')) // sourcemaps输出路径（存放位置）
        .pipe(rename({suffix: '.min'}))
        .pipe(gulp.dest('dist/css/'));
}

function buildjs() {
    var js_src_dir = 'assets/javascripts/bootstrap/';
    var js_src = [
        js_src_dir + 'transition.js',
        js_src_dir + 'alert.js',
        js_src_dir + 'button.js',
        js_src_dir + 'carousel.js',
        js_src_dir + 'collapse.js',
        js_src_dir + 'dropdown.js',
        js_src_dir + 'modal.js',
        js_src_dir + 'tab.js',
        js_src_dir + 'affix.js',
        js_src_dir + 'scrollspy.js',
        js_src_dir + 'tooltip.js',
        js_src_dir + 'popover.js'
    ];

    return gulp.src(js_src)
        .pipe(concat('bootstrap.js'))
        .pipe(sourcemaps.init()) // 创建sourcemaps
        .pipe(uglify())
        .pipe(rename({basename: 'bootstrap', suffix: '.min'}))
        .pipe(sourcemaps.write('maps')) // sourcemaps输出路径（存放位置）
        .pipe(gulp.dest('dist/js/'));
}

gulp.task(buildcss);
gulp.task(buildjs);

gulp.task('default', gulp.parallel('buildcss', 'buildjs'));

至此，gulp编译bs的主体工程就完工了，没有包括处理图标字体路径的任务。剩下就是优化gulpfile.js，具体优化因人而异，不再细说。