Gulp + Bootstrap 字体

Question

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

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

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

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

但它会自动将 link 字体从

更改为

../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

我应该如何正确构建所有内容才能将 link 从 main.css 变为 glyphicons-halflings-regular.eot？

Answer 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;
});

Gulp + Bootstrap 字体

Gulp + Bootstrap Fonts

gulp

gulp-sass