Gulp + Bootstrap 字体答案

【问题标题】：Gulp + Bootstrap FontsGulp + Bootstrap 字体
【发布时间】：2017-01-21 18:45:38
【问题描述】：

简单来说，我的文件结构如下：

frontend
├── bower_components
│   └── bootstrap
│       └── dist
│           ├── css
│           │   └── bootstrap.css
│           └── fonts
│               └── glyphicons-halflings-regular.eot
│
├── src
│   ├── style
│   │   └── main.sass
│   └── index.html
│
└── gulpfile.js

在main.sass我直接导入引导文件：

@import ../../bower_components/bootstrap/dist/css/bootstrap.css

但它会自动将链接从

更改为字体

../fonts/glyphicons-halflings-regular.eot

到

../../bower_components/bootstrap/dist/fonts/glyphicons-halflings-regular.eot.

使用 Gulp 构建后我想要得到的是这样的结构：

build
├── css
│   └── main.css
├── fonts
|   └── glyphicons-halflings-regular.eot
└── index.html

我应该如何正确构建所有内容以获取main.css 到glyphicons-halflings-regular.eot 的链接？

【问题讨论】：

标签： gulp gulp-sass

【解决方案1】：

最后，我放弃了 .css 文件的导入，转而使用 gulp-concat。工作正常。源映射也是正确的。

gulp.task('style:build', function () {
    var cssStream = gulp.src(path.bower.bootstrap.css);

    var sassStream = gulp.src(path.src.style)
        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(prefixer())
        .pipe(cleanCSS())
        .pipe(sourcemaps.write());

    var mergedStream = merge(cssStream, sassStream)
        .pipe(sourcemaps.init())
        .pipe(concat('main.css'))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest(path.build.css))
        .pipe(reload({stream: true}));

    return mergedStream;
});

【讨论】：