Update gulpfile.js

gulpfile.js

@@ -3,6 +3,7 @@ const pug = require('gulp-pug');
 const sass = require('gulp-sass');
 const rename = require('gulp-rename');
 const htmlbeautify = require('gulp-html-beautify');
+const autoprefixer = require('gulp-autoprefixer');
 const server = require('browser-sync').create();
 const del = require('del');
 
@@ -38,6 +39,14 @@ var paths = {
     src: 'src/images/**/*',
     dest: 'dist/images/'
   },
+  icons: {
+    src: 'src/icons/**/*',
+    dest: 'dist/icons/'
+  },
+  fonts: {
+    src: 'src/fonts/**/*',
+    dest: 'dist/fonts/'
+  },
   all: {
     src: 'src/**/*',
   }
@@ -54,6 +63,18 @@ function copyScripts() {
     .pipe(gulp.dest(paths.scripts.dest));
 }
 
+function copyIcons() {
+  return gulp.src(paths.icons.src)
+    .pipe(gulp.dest(paths.icons.dest));
+  cb();
+}
+
+function copyFonts() {
+  return gulp.src(paths.fonts.src)
+    .pipe(gulp.dest(paths.fonts.dest));
+  cb();
+}
+
 function clean(cb) {
   exports.clean = del.bind(null, ['dist']);
   cb();
@@ -69,21 +90,27 @@ function templates() {
 function styles() {
   return gulp.src(paths.styles.src)
     .pipe(sass())
+    .pipe(autoprefixer({
+      browsers: ['last 2 versions'],
+      cascade: false
+    }))
     .pipe(gulp.dest(paths.styles.dest));
 }
 
 function watch() {
-  gulp.watch(paths.all.src, gulp.series(gulp.parallel(templates, styles, copyImages, copyScripts), reload));
+  gulp.watch(paths.all.src, gulp.series(gulp.parallel(templates, styles, copyImages, copyScripts, copyFonts, copyIcons), reload));
 }
 
 // Expose individual functions as gulp tasks for debugging purposes
 exports.templates = templates;
 exports.copyImages = copyImages;
 exports.copyScripts = copyScripts;
+exports.copyIcons = copyIcons;
+exports.copyFonts= copyFonts;
 exports.clean = clean;
 exports.watch = watch;
 exports.styles = styles;
 
 // Export our defaults
-exports.default = gulp.series(clean, gulp.parallel(templates, styles, copyImages, copyScripts), serve, watch);
-exports.build = gulp.series(clean, gulp.parallel(templates, styles, copyImages, copyScripts));
+exports.default = gulp.series(clean, gulp.parallel(templates, styles, copyImages, copyScripts, copyIcons, copyFonts), serve, watch);
+exports.build = gulp.series(clean, gulp.parallel(templates, styles, copyImages, copyScripts, copyIcons, copyFonts));

package.json

@@ -11,6 +11,7 @@
   "devDependencies": {
     "browser-sync": "^2.24.7",
     "gulp": "^4.0.0",
+    "gulp-autoprefixer": "^6.0.0",
     "gulp-pug": "^4.0.1",
     "gulp-rename": "^1.4.0",
     "gulp-sass": "^4.0.1"

src/scss/screen.scss

@@ -1,4 +1,22 @@
+@font-face {
+  font-family: 'Inter UI';
+  font-style:  normal;
+  font-weight: 400;
+  src: url('/fonts/inter-ui.var.woff2') format("woff2-variations"),
+       url("/fonts/inter-ui-regular.woff2") format("woff2"),
+       url("/fonts/inter-ui-regular.woff") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter UI';
+  font-style:  normal;
+  font-weight: 500;
+  src: url('/fonts/inter-ui.var.woff2') format("woff2-variations"),
+       url("/fonts/inter-ui-medium.woff2") format("woff2"),
+       url("/fonts/inter-ui-medium.woff") format("woff");
+}
+
 body {
   background: #FFF;
-  font-family: sans-serif;
+  font-family: "Inter UI", sans-serif;
 }