build fonts.list for gulp-google-webfonts

buildFontList.js

"use strict";

// Gulp API and configuration
const { src, dest } = require('gulp');

// Other dependencies
const googleFonts = require('gulp-google-webfonts');
const getUrls = require('get-urls');
const through2 = require('through2');
const url = require('url');

// Paths
const gp = {
  "src": {
    "path": "build/fonts/"
  },
  "dest": {
    "path": "result/fonts/"
  }
};

// Paths is relative to gulp.dest source
const c = {
  "googleFonts": {
    "fileName": "fonts.list",
    "fontsDir": "../fonts/",
    "cssDir": "../css/parts/",
    "cssFilename": "fonts.styl"
  }
}

/*
------------------------------------
 [getGoogleFonts]
 download google fonts
 
 You can use same format as Google Fonts website provide and paste in fonts.list one of the following:
 <link href="https://fonts.googleapis.com/css?family=Lobster|Nunito&subset=cyrillic" rel="stylesheet">
 @import url('https://fonts.googleapis.com/css?family=Lobster|Nunito&subset=cyrillic');
------------------------------------
*/
function getGoogleFonts(cb) {

  return src(gp.src.path + c.googleFonts.fileName, gp.src.opt)
  // Read content of fonts.list file === @import url('https://fonts.googleapis.com/css?family=Lobster|Nunito&subset=cyrillic');
    
    .pipe(through2.obj(function(file, _, cb) {
    // Parse fonts.list content and convert it to valid
    // gulp-google-webfonts format on the fly without making new file 

      if (file.isBuffer()) {
      // Checking file is stream buffer

        let input = getUrls(file.contents.toString(), c.getUrls.opt);
        // getUrls displays a dirty value, leaving unwanted special characters at the end of the line [ );' ]
        // so we need to do some trick to clean the value        
        // @input {[object Set]} === Set { 'https://fonts.googleapis.com/css?family=Lobster|Nunito&subset=cyrillic\');' }

        let content = '';
        // @content {[string]} === empty variable for resulting string

        for (let item of input) {
        // @item {[string]} === https://fonts.googleapis.com/css?family=Lobster|Nunito&subset=cyrillic');

          let obj = url.parse(item, true);
          // @obj {[object Object]} ===
          /**
            Url {
              protocol: 'https:',
              slashes: true,
              auth: null,
              host: 'fonts.googleapis.com',
              port: null,
              hostname: 'fonts.googleapis.com',
              hash: null,
              search: '?family=Lobster%7CNunito&subset=cyrillic%27);',
              query: { family: 'Lobster|Nunito', subset: 'cyrillic\');' },
              pathname: '/css',
              path: '/css?family=Lobster%7CNunito&subset=cyrillic%27);',
              href: 'https://fonts.googleapis.com/css?family=Lobster%7CNunito&subset=cyrillic%27);'
            }
          */

          let family = obj.query.family.replace(/\s/g,'+').split('|');
          // @family {[object]} === [ 'Lobster', 'Nunito' ]

          let subset = '';
          // @subset {[string]} === empty variable for part of string with subset value

          delete obj.query.family;
          // remove from object everything except @subset key/value
          // because it has wrong format and can't be callled in normal way
          // @obj.query {[object]} === { subset: 'cyrillic\');' }

          let regex = /([')(;])|(amp;)/g;
          obj = JSON.parse(JSON.stringify(obj.query).replace(regex,''));
          // convert @obj.query to string and filter characters with
          // regular expression @regex
          // @obj {[object Object]} === { subset: 'cyrillic' }

          if (obj.subset) subset = `&subset=${obj.subset}`;
          // @if {[true]} @subset === &subset=cyrillic

          family.forEach(function(font) {
             content += `${font}${subset}\n`;
            // @content {[string]} === Lobster&subset=cyrillic...
          });
        }
        // @content {[string]} === valid gulp-google-webfonts format
        //
        // Lobster&subset=cyrillic
        // Nunito&subset=cyrillic

        file.contents = Buffer.from(content);
        // @file.contents {[object]} === new buffer from @content
      }
      cb(null, file);
      // Return file with new content to next pipe
    }))
    .pipe(googleFonts(c.googleFonts))
    .pipe(dest(gp.src.path))

  cb();
}

// ---> Exports
exports.getGoogleFonts = getGoogleFonts;