Hello @amacado,

Here are the contents for this PR:

Summary:

• The upgradeDev.js would create a newDevicon.json that has the color and aliases attribute
• The gulp tasks updateCss and cleanUp are used to create the css files.
• The updateCss task used Sass to help with creating the devicon-alias.css, concatenation, and minification. We can remove the other gulp tasks that did these jobs.
• The min.css created by updateCss might look weird but it works.
• These fonts don't have colors, font versions, or just bad naming: mocha, clojure, clojurescript, redux, yunohost.

The upgrade devicon.json script:

• The script is called upgradeDev.js. This is what it does:
  • Parse the devicon.json, devicon-colors.css and the devicon-alias.css.
  • Add any colors and aliases to the correct object in the deviconJson in memory
  • Write the deviconJson to a new file called newDevicon.json.
• After the run, you should see some logs and artifacts:
  • The script would generate these artifacts:
    • contentMap.json: created from devicon.css and maps a class name to the content property
    • aliasMap.json: created from devicon-alias.css and maps the content property to an array of aliases
    • colorsMap.json: created from devicon-colors.css and maps a class name to the color property
    • See line 16 for details.
  • The logs would list font objects that didn't have a font version (aka no aliases) or a color attribute. See line 137 to see the filter.
• Note:
  • dot-net in the newDevicon.json generated by the script doesn't have a color. This is due to the regexp that I used. It's faster if we just add the colors in manually afterwards, which is what I did for the newDevicon.json`.

The css-generating scripts:

• They are located in the gulpfile.js.
• The script utilized the Sass compiler, which is a CSS pre-processor.
• What the script does:
  • It loops through the devicon.json or in this case, the newDevicon.json.
  • To generate the devicon-colors.css, it generates css as read from the deviconJson. It skips any objects that doesn't have a color or fonts.
  • To generate the devicon-alias.css, it generates css for the aliases using the @extend syntax from Sass. Whenever a selector @extend another selector, Sass knows to generate the same css for both of them. You can see the result in the min.css.
  • After creating these files, the script create min.scss where it imports the above files. I then use gulp to process this file, creating the min.css file (the file extension .scss means a Sass file).
• Notes:
  • Sass concatenates and minifies the final css file. To see a minify version, go to line 37 and follow the instructions there. This means that we can remove the gulp-concat and gulp-minify dependencies.
  • The final output of min.css has the content property as squares (see below).

• This is fine and doesn't create a problem (see this). You can test it by:

  • Open the index.html located at the root dir.
  • Find the <link> that imports the devicon.min.css
  • Change the href to min.css
  • You should see that the fonts are still there with no issues (disable cache before doing this).

• You can run this gulp task by typing npm run build. For this task, I chain gulp tasks together rather than using the gulp.series(). This is because of a weird bug:

  • In the gulpfile.js, there's a task at the bottom called test which uses gulp.series(). Try running this task.
  • The task would run well; the min.css is generated correctly and the cleanUp() removed all artifacts.
  • However, gulp would log an error complaining that the min.scss file is not found. The source of this is from a package called duplexify, which might be from gulp or sass. In the cleanUp() function, I have tried changing unlink() to access() and things work fine (no errors).
  • I think there might be some async issues. However, I don't think that we should spend time on it considering the gulp.series() is only faster than && chaining by a few seconds.

Let me know what you think. Also, I'd need to clean up the branch before we merge it.