gulp 작업 브라우저에서 글꼴을 찾을 수없는 경우

bower_component에서 글꼴을 복사하는 작업을 실행하면 브라우저가 올바른 경로와 혼동을 일으키는 것 같습니다. gulp 작업 브라우저에서 글꼴을 찾을 수없는 경우

이

글꼴에 대한 꿀꺽 작업입니다 :

// Fonts 
gulp.task('fonts', function() { 
    return gulp.src(bowerDir + '/open-sans-fontface/fonts/**/*.{eot,svg,ttf,woff,woff2}', function (err) {}) 
     .pipe(gulp.dest(dest + 'fonts')); 
});

그리고이 스타일에 대한 꿀꺽 작업입니다 : 내가 꿀꺽 파일을 조정하려면 어떻게

// Styles 
gulp.task('styles', function() { 
    return plugins.sass(src + 'styles/main.scss', { 
      style: 'expanded', 
      loadPath: [ 
      // './resources/sass', 
      bowerDir + '/bootstrap-sass/assets/stylesheets', 
      bowerDir + '/font-awesome/scss', 
      bowerDir + '/open-sans-fontface' 
      ] 
     }) 
     .pipe(plugins.autoprefixer('last 2 version')) 
     .pipe(gulp.dest(dest + 'styles')) 
     .pipe(plugins.rename({ suffix: '.min' })) 
     .pipe(plugins.cssnano()) 
     .pipe(gulp.dest(dest + 'styles')) 
     .pipe(reload({stream: true})); 
     // .pipe(plugins.notify({ message: 'Styles task complete' })); 
});

, 이렇게 생성 된 CSS 파일의 모습 올바른 길을 위해?

출처

2016-07-28 moesphemie

gulp-replace을 사용할 수 있습니다. 예 :

gulp.task('styles', function() { 
    return gulp.src('src/styles/main.scss') 
    .pipe(plugins.sass()) 
    .pipe(plugins.replace('original-path/fonts/', 'new-path/fonts/')) 
    .pipe(gulp.dest('dist')); 
});

bootstrap 글꼴이 original-path/fonts/ 인 경우 styles 작업을 실행 한 후에 해당 경로가 new-path/fonts/으로 바뀌 었습니다.

출처

2016-07-28 15:26:40 MadScone

감사합니다. MadScone하지만 불행히도 아무 것도 변경되지 않았습니다. 내 스타일 작업에 코드를 추가했습니다. .pipe (plugins.replace (dest + 'style/fonts', dest + 'fonts/open-sans')) 브라우저가 여전히 잘못된 경로를 찾고 있습니다. – moesphemie

'replace()'의 첫번째 인자가 옳지 않다. 나는 당신의 글꼴에 대한 원래 경로가'dest + 'style/fonts''라고 생각하지 않는다. 'dest '가 무엇인지는 모르겠지만 "build"와 같은 것으로 가정하면 ...'replace()'는'build/style/fonts'를'build/fonts/open-sans'으로 대체 할 것입니다. 하지만 open-sans는'build/style/fonts'를 가리키지 않을 것입니다. 아마 당신이'plugins.replace ('./ fonts', './fonts/open-sans')'와 같은 것을 원한다고 생각합니다. 첫 번째 인수는 변경할 원본 URL입니다. – MadScone

도움을 주셔서 감사합니다. :) 이제 문제가 해결되었습니다. main.css를 살펴보고 작동 할 때까지 대체 플러그인으로 약간 연주했습니다! – moesphemie

gulp 작업 브라우저에서 글꼴을 찾을 수없는 경우

답변

관련 문제