Как импортировать шрифты используя Gulp / Sass? - PullRequest
Новая
       34

Как импортировать шрифты используя Gulp / Sass?

0 голосов
/ 28 апреля 2019

Я пытаюсь импортировать пользовательские шрифты, используя Gulp и Sass, но не могу понять, как.

Пока я пробовал много вещей:

  1. Создать миксин 
@mixin font-face($font-family, $file-path, $font-weight, $font-style) {
  @font-face {
    font-family: $font-family;
    src: url("#{$file-path}.eot");
    src: url("#{$file-path}.eot?#iefix") format("embedded-opentype"),
      url("#{$file-path}.woff") format("woff"),
      url("#{$file-path}.ttf") format("truetype"),
      url("#{$file-path}.svg##{$font-family}") format("svg");
    font-weight: $font-weight;
    font-style: $font-style;
  }
  // Chrome for Windows rendering fix: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
      font-family: $font-family;
      src: url("#{$file-path}.svg##{$font-family}") format("svg");
    }
  }
}
Затем в моем основном файле scss я включил его следующим образом: 
/* Include custom fonts */
@include font-face(
  "Myfont-Regular",
  "../../src/fonts/Myfont-Regu",
  400,
  normal
);
@include font-face(
  "Myfont-Bold",
  "../../src/fonts/Myfont-Bold",
  700,
  bold
);
@include font-face(
  "Myfont-Black",
  "../../src/fonts/Myfont-BlacExte",
  900,
  normal
);

/* End custom fonts include */

///Defining Font Family
$body-font-regular: "Myfont-Regular", Arial, Helvetica, sans-serif;
$body-font-bold: "Myfont-Bold", Arial, Helvetica, sans-serif;
$body-font-black: "Myfont-Black", Arial, Helvetica, sans-serif;

Я думаю, что основная проблема связана с моим .gulpfile, но я не могу узнать, где (яЯ только начинаю использовать gulp, поэтому я сделал это из фрагментов, которые я нашел).Я создал задачу gulp, чтобы скопировать папку шрифтов, но я не уверен, как заставить это работать.Вот мой gulpfile: 

"use strict";

/*global require*/
const autoprefixer = require("autoprefixer");
const babel = require("gulp-babel");
const browserSync = require("browser-sync");
const changed = require("gulp-changed");
const concat = require("gulp-concat");
const data = require("gulp-data");
const del = require("del");
const gulp = require("gulp");
const gulpif = require("gulp-if");
const imagemin = require("gulp-imagemin");
const path = require("path");
const plumber = require("gulp-plumber");
const postcss = require("gulp-postcss");
const pug = require("gulp-pug");
const runSequence = require("run-sequence");
const sass = require("gulp-sass");
const sourcemaps = require("gulp-sourcemaps");
const uglify = require("gulp-uglify");

/**
 * List of options
 */
const options = {
  uglifyJS: true,
  sourceMaps: true,
  useBabel: true
};

/*
 * List of directories
 */
const paths = {
  input: {
    sass: "./src/sass/",
    data: "./src/_data/",
    js: "./src/js/",
    images: "./src/img/",
    fonts: "./src/fonts"
  },
  output: {
    css: "./public/css/",
    js: "./public/js/",
    images: "./public/img/",
    fonts: "./public/fonts"
  },
  public: "./public/"
};

/************************
 * Gulp Tasks *
 ************************/

/**
 *  Concat all scripts and make sourcemap (optional)
 *  Scripts from vendor folder added first
 */
gulp.task("javascript", function() {
  return gulp
    .src([paths.input.js + "vendor/**/*.js", paths.input.js + "**/*.js"])
    .pipe(plumber())
    .pipe(gulpif(options.sourceMaps, sourcemaps.init()))
    .pipe(
      gulpif(
        options.useBabel,
        babel({
          presets: ["@babel/preset-env"]
        })
      )
    )
    .pipe(concat("script.js"))
    .pipe(gulpif(options.uglifyJS, uglify()))
    .pipe(gulpif(options.sourceMaps, sourcemaps.write("../maps")))
    .pipe(gulp.dest(paths.output.js))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
});

/*
 * Minify all images
 */
gulp.task("image-min", function() {
  return gulp
    .src(paths.input.images + "**/*.+(png|jpg|gif|svg|jpeg)")
    .pipe(plumber())
    .pipe(changed(paths.output.images))
    .pipe(imagemin())
    .pipe(gulp.dest(paths.output.images));
});

/**
 * Compile .pug files and pass in data from json file
 * Example: index.pug - index.pug.json
 */
gulp.task("pug", function() {
  return gulp
    .src("./src/*.pug")
    .pipe(plumber())
    .pipe(
      data(function(file) {
        const json = paths.input.data + path.basename(file.path) + ".json";
        delete require.cache[require.resolve(json)];
        return require(json);
      })
    )
    .pipe(pug({ pretty: true }))
    .pipe(gulp.dest(paths.public))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
});

/**
 * Removing public folder with it contents
 */
gulp.task("build-clean", function() {
  return del(paths.public);
});

/**
 * Recompile .pug files and live reload the browser
 */
gulp.task("rebuild", ["pug"], function() {
  browserSync.reload();
});

/**
 * Launch the browser-sync Server
 */
gulp.task("browser-sync", function() {
  browserSync({
    server: {
      baseDir: paths.public
    },
    notify: false
  });
});

/**
 * Copy custom font folder
 */
gulp.task("copy", ["clean"], function() {
  return gulp
    .src(["src/fonts/*"], {
      base: "src"
    })
    .pipe(gulp.dest("public"));
});

/**
 * Task group for development
 */
gulp.task("develop", function() {
  runSequence(
    "build-clean",
    ["sass", "javascript", "image-min", "pug"],
    "browser-sync"
  );
});

/**
 * Building distributive
 */
gulp.task("build-dist", function() {
  runSequence("build-clean", ["sass", "javascript", "image-min", "pug"]);
});

/**
 * Compile .scss files
 * Autoprefixer
 * Sourcemaps (optional)
 */
gulp.task("sass", function() {
  return gulp
    .src(paths.input.sass + "*.scss")
    .pipe(plumber())
    .pipe(gulpif(options.sourceMaps, sourcemaps.init()))
    .pipe(
      sass({
        includePaths: [paths.input.sass],
        outputStyle: "compressed"
      })
    )
    .pipe(postcss([autoprefixer()]))
    .pipe(gulpif(options.sourceMaps, sourcemaps.write("../maps")))
    .pipe(gulp.dest(paths.output.css))
    .pipe(
      browserSync.reload({
        stream: true
      })
    );
});

/**
 * Watch files for changes
 */
gulp.task("watch", function() {
  gulp.watch(paths.input.sass + "**/*.scss", ["sass"]);
  gulp.watch(paths.input.js + "**/*.js", ["javascript"]);
  gulp.watch(paths.input.images + "**/*", ["image-min"]);
  gulp.watch(["./src/**/*.pug", "./src/**/*.json"], ["pug"]);
});

/**
 * Shorthand for build-dist
 */
gulp.task("build", ["build-dist"]);

/**
 * Default task for development, fast-start by 'gulp' command
 */
gulp.task("default", ["develop", "watch"]);

Кстати, вот структура папок моего проекта: Folder structure

...