我可以使用 gulp 将 sass 和 css 捆绑在 bower_components 下吗

Question

我使用gulp-罗盘和gulp-postcss。我找不到找到 css 文件和依赖文件 public 文件夹的最佳方法，例如 webroot/css 和 gulp。我在下面显示部分 gulpfile.js。

var postcss = require('gulp-postcss');
var cssnano = require('cssnano');
var atImport = require('postcss-import');
        var vendorCssPath =
        [
            path.join(app_root,'/bower_components/material-design-icons/iconfont/material-icons.css')
        ];
    gulp.task('css', function () {
        var processors = [
            atImport(),
            cssnano()
        ];
        return gulp.src(vendorCssPath)
            .pipe(cache('css'))
            .pipe(postcss(processors))
            .pipe(gulp.dest(path.join(projectDir,'/css')));
    });

它适用于 material-icons.css，但此输出不包括依赖于（例如：MaterialIcons-Regular.eot MaterialIcons-Regular.svg MaterialIcons- 的文件Regular.woff MaterialIcons-Regular.ijmap MaterialIcons-Regular.ttf MaterialIcons-Regular.woff2)。我希望这些资产在 public 文件夹中找到 gulp.Though 就足够了，最好将这些文件和编译后的 css 文件与 gulp-compass 捆绑到 css 文件中，如果有可能。

你有什么想法吗？

Answer 1

所以问题是您必须将字体从 bower 依赖项复制到您的构建文件夹（如果您使用其他任务来管理字体，则复制到您的 src 文件夹）。最好的方法是制作将复制字体的 gulp 任务（如果您更新依赖项，您可以运行字体任务，它将复制更新的文件）。然后你可以使用 SASS 添加字体：

// FONTS
// ---------------------------------------------------

@mixin font-face($fontFamily, $src, $fontName){
  @font-face {
    font-family: $fontFamily;
    src: url("#{$src}#{$fontName}.eot");
    src: url("#{$src}#{$fontName}.eot?#iefix") format("embedded-opentype"),
         url("#{$src}#{$fontName}.woff") format("woff"),
         url("#{$src}#{$fontName}.ttf") format("truetype"),
         url("#{$src}#{$fontName}.svg##{$fontFamily}") format("svg");
  }
}

@include font-face('Material Icons', '/assets/build/fonts/MaterialIcons/', 'MaterialIcons-Regular');

和 CSS 你可以包含在你的主 SCSS 文件中，例如 main.scss:

@import './bower_components/material-design-icons/iconfont/material-icons.css';

您可以在此处阅读更多内容http://google.github.io/material-design-icons/

我可以使用 gulp 将 sass 和 css 捆绑在 bower_components 下吗

Can I bundle sass and css under bower_components with using gulp

css

gulp

postcss