Удаленный импорт шрифтов с помощью Gulp

Итак, я замечаю, что моя текущая настройка Gulp не импортирует удаленные шрифты, такие как шрифты Google. В моем файле main.scss у меня есть:

@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic);

И когда он компилируется в минифицированном виде, он выглядит примерно так:

@font-face{font-family:Lato;font-style:normal;font-weight:100;src:local('Lato Hairline'),local('Lato-Hairline'),url(../../fonts.gstatic.com/s/lato/v11/zJY4gsxBiSo5L7tNutxFNg.ttf) format('truetype')}

Я использую gulp-minify-css, который использует clean-css. Я знаю, что вам нужно что-то сделать, чтобы удаленный импорт работал правильно, но чтение документации оставило у меня больше вопросов, чем ответов. Вот раздел моего файла gulp, который обрабатывает минимизацию Sass/CSS:

// Minimize CSS
gulp.task('minify-css', function() {
  return gulp.src('css/src/*.css')
    .pipe(minifyCss({
        compatibility: 'ie8',
        aggressiveMerging: false
        }))
    .pipe(gulp.dest('css/'));
});

Любая помощь будет оценена по достоинству! Спасибо.


javascript css clean-css gulp gulp-clean-css
person erwstout    schedule 23.10.2015    source источник
comment
нашел решение для этого?   -  person Abhishek    schedule 10.03.2016
comment
@Abhishek нет, после этого поста мы перешли на gulp-cssnano и изменили способ постановки шрифтов в очередь, поэтому это больше не актуально.   -  person erwstout    schedule 10.03.2016

Ответы (1)


arrow_upward
3
arrow_downward

Ваша проблема связана с отсутствием sass для импорта файлов css. Вам нужно скопировать файл css и переименовать его в файл *.scss. Файл scss может быть правильно импортирован.

Вам нужно будет установить и потребовать gulp-rename: https://www.npmjs.com/package/gulp-rename

В случае вашего примера вы также можете использовать gulp-google-webfonts: https://www.npmjs.com/package/gulp-google-webfonts

шрифты.список:

Lato:400,100,100italic,300,300italic,700,700italic,400italic,900,900italic

gulpfile.js:

var gulp = require('gulp');
var googleWebFonts = require('gulp-google-webfonts');

var options = { };

gulp.task('fonts', function () {
    return gulp.src('./fonts.list')
        .pipe(googleWebFonts(options))
        .pipe(gulp.dest('out/fonts'))
        ;
    });

gulp.task('default', ['fonts']);
person sepiott    schedule 03.04.2016
comment
Спасибо, теперь мы изменили способ управления шрифтами в проектах, но gulp-google-webfonts наверняка будет полезен. Ценю ваш ответ. - person erwstout; 04.04.2016