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

我使用gulp-compass和gulp-postcss。我无法找到最好的方式来找到css文件和依赖关系文件公共文件夹像webroot/css与吞。我显示部分gulpfile.js波纹管。我可以使用gulp将sass和css捆绑在bower_components下使用gulp

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

它的工作原理有关材料icons.css，但输出不包括依赖（如文件：MaterialIcons-Regular.eot MaterialIcons-Regular.svg MaterialIcons-Regular.woff MaterialIcons-Regular.ijmap MaterialIcons-Regular.ttf MaterialIcons-Regular.woff2）。我希望这些资源与gulp找到公共文件夹。尽管这已足够，但如果可能的话，将这些文件和带有gulp-compass的已编译css文件捆绑到css文件中会更好。

你有什么想法吗？

来源

2017-01-16 tkowt

所以问题是你必须将字体从鲍尔依赖关系复制到你的构建文件夹（或者如果你使用一些其他任务来管理字体的话你的src文件夹）。最好的办法是制作吞噬任务，它将复制字体（如果你更新依赖关系，你可以运行字体任务，它会复制更新的文件）。在main.scss

// 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文件，例如：然后你可以使用SASS用于添加字体

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

你可以在这里阅读更多http://google.github.io/material-design-icons/

来源

2017-01-16 10:14:20 Goku

感谢您的建议。我找到了解决方案，并且我明白了我应该使用[gulp-starter]（https://github.com/vigetlabs/gulp-starter/tree/master/gulpfile.js/tasks/iconFont）来完成吞噬任务。这个存储库非常棒，有许多特定的配置案例。我很感激你的建议。 – tkowt

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

回答

相关问题