diff --git a/gulpfile.js b/gulpfile.js index 23fe450e..08247bcf 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,9 +1,9 @@ -var gulp = require('gulp'); -const svgmin = require("gulp-svgmin") -const sass = require('gulp-sass'); -sass.compiler = require('sass') -const yargs = require("yargs") -const fsPromise = require('fs').promises; +const gulp = require("gulp"); +const svgmin = require("gulp-svgmin"); +const sass = require("gulp-sass"); +sass.compiler = require("sass"); +const yargs = require("yargs"); +const fsPromise = require("fs").promises; const path = require("path"); // global const @@ -19,17 +19,18 @@ const finalMinSCSSName = "devicon.min.scss"; * css files and compiling them together using Sass. */ async function createDeviconMinCSS() { - await createCSSFiles(); + await createCSSFiles(); - let deviconMinPath = path.join(__dirname, finalMinSCSSName); - // recall that devicon-alias.scss imported the devicon.css => don't need - // to reimport that file. - const fileContent = `@use "${aliasSCSSName}";@use "${colorsCSSName}";`; - await fsPromise.writeFile(deviconMinPath, fileContent, "utf8"); + let deviconMinPath = path.join(__dirname, finalMinSCSSName); + // recall that devicon-alias.scss imported the devicon.css => don't need + // to reimport that file. + const fileContent = `@use "${aliasSCSSName}";@use "${colorsCSSName}";`; + await fsPromise.writeFile(deviconMinPath, fileContent, "utf8"); - return gulp.src(finalMinSCSSName) - .pipe(sass.sync({"outputStyle": "compressed"}).on('error', sass.logError)) - .pipe(gulp.dest('./')); + return gulp + .src(finalMinSCSSName) + .pipe(sass.sync({ outputStyle: "compressed" }).on("error", sass.logError)) + .pipe(gulp.dest("./")); } /** @@ -37,16 +38,14 @@ async function createDeviconMinCSS() { * devicon-colors.css from the devicon.json. */ async function createCSSFiles() { - const deviconJson = JSON.parse( - await fsPromise.readFile( - path.join(__dirname, deviconJSONName), "utf8" - ) - ); + const deviconJson = JSON.parse( + await fsPromise.readFile(path.join(__dirname, deviconJSONName), "utf8") + ); - await Promise.all([ - createAliasSCSS(deviconJson), - createColorsCSS(deviconJson) - ]) + await Promise.all([ + createAliasSCSS(deviconJson), + createColorsCSS(deviconJson) + ]); } /** @@ -55,20 +54,19 @@ async function createCSSFiles() { * This is due to sass's ability to extend classes => Make it easier * to create aliases classes. * @param {Object} deviconJson, the object read from the - * devicon.json file. + * devicon.json file. * @return a Promise that'll resolve when the devicon-alias.scss is * created. */ function createAliasSCSS(deviconJson) { - let statements = deviconJson.map(createAliasStatement).join(" "); - let sass = `@use "devicon";${statements}`; - let sassPath = path.join(__dirname, aliasSCSSName); - return fsPromise.writeFile(sassPath, sass, "utf8"); + let statements = deviconJson.map(createAliasStatement).join(" "); + let sass = `@use "devicon";${statements}`; + let sassPath = path.join(__dirname, aliasSCSSName); + return fsPromise.writeFile(sassPath, sass, "utf8"); } - /** - * Create the aliases statement by searching for the + * Create the aliases statement by searching for the * techname in the statement and finding its aliases in * the deviconJson. * @param {Object} fontObj, a devicon font object. @@ -76,102 +74,99 @@ function createAliasSCSS(deviconJson) { * devicon-alias.scss. */ function createAliasStatement(fontObj) { - let { - name, - aliases - } = fontObj; + let { name, aliases } = fontObj; - return aliases.map(aliasObj => { - return `.devicon-${name}-${aliasObj.alias} { + return aliases + .map(aliasObj => { + return `.devicon-${name}-${aliasObj.alias} { @extend .devicon-${name}-${aliasObj.base}; }`; - }).join(" "); + }) + .join(" "); } /** * Create a colors css file in the root dir based on the deviconJson. * @param {Object} deviconJson, the object read from the - * devicon.json file. + * devicon.json file. * @return a Promise that'll resolve when the devicon-alias.scss is * created. */ function createColorsCSS(deviconJson) { - // create the color statements for each font object - let statements = deviconJson.map(fontObj => { - let { - name, - versions: { - font: fonts - }, - color, - aliases - } = fontObj; + // create the color statements for each font object + let statements = deviconJson + .map(fontObj => { + let { + name, + versions: { font: fonts }, + color, + aliases + } = fontObj; - if (fonts.length === 0 || typeof(color) !== "string") { - console.log(`This object doesn't have a font or a color: ${name}`); - return ""; - } + if (fonts.length === 0 || typeof color !== "string") { + console.log(`This object doesn't have a font or a color: ${name}`); + return ""; + } - // process the icons in the font attr - let cssClasses = fonts.map(font => `.devicon-${name}-${font}.colored`); + // process the icons in the font attr + let cssClasses = fonts.map((font) => `.devicon-${name}-${font}.colored`); - // process the icons in the aliases attr - aliases.forEach(aliasObj => { - cssClasses.push(`.devicon-${name}-${aliasObj["alias"]}.colored`); - }); + // process the icons in the aliases attr + aliases.forEach(aliasObj => { + cssClasses.push(`.devicon-${name}-${aliasObj["alias"]}.colored`); + }); - return `${cssClasses.join(",")}{color: ${color}}`; - }).join(" "); + return `${cssClasses.join(",")}{color: ${color}}`; + }) + .join(" "); - let cssPath = path.join(__dirname, colorsCSSName); - return fsPromise.writeFile(cssPath, statements, "utf8"); + let cssPath = path.join(__dirname, colorsCSSName); + return fsPromise.writeFile(cssPath, statements, "utf8"); } /** - * Remove the devicon-alias.scss, devicon-colors.css, + * Remove the devicon-alias.scss, devicon-colors.css, * and the devicon.min.scss. */ function cleanUp() { - let fileNames = [ - aliasSCSSName, - colorsCSSName, - finalMinSCSSName, - ]; + let fileNames = [aliasSCSSName, colorsCSSName, finalMinSCSSName]; - return Promise.all( - fileNames.map(name => { - try { - let filePath = path.join(__dirname, name); - return fsPromise.unlink(filePath); - } catch(e) { - console.log(e); - } - }) - ); + return Promise.all( + fileNames.map(name => { + try { + let filePath = path.join(__dirname, name); + return fsPromise.unlink(filePath); + } catch (e) { + console.log(e); + } + }) + ); } - //////// Update SVG Task //////// /** - * Update the svg by optimizing it + * Update the svg by optimizing it * and prefixing its ids so it's unique across the repo. - * + * * This requires a json list of svg file names to update. * This must be passed through the commandline arguments. */ function optimizeSvg() { - let svgGlob = JSON.parse(yargs.argv.svgFiles) - console.log("Optimizing these files: ", svgGlob) - return gulp.src(svgGlob) + let svgGlob = JSON.parse(yargs.argv.svgFiles); + console.log("Optimizing these files: ", svgGlob); + return gulp + .src(svgGlob) .pipe(svgmin(configOptionCallback)) - .pipe(gulp.dest(file => { - return file.base - })) + .pipe( + gulp.dest(file => { + return file.base; + }) + ); } /** * Create a config option for each file. - * @param {Object} file - Gulp Vinyl instance of the file + * @param {Object} file - Gulp Vinyl instance of the file * being processed. * @returns a SVGO config object. */ @@ -182,7 +177,7 @@ function configOptionCallback(file) { prefixIds: { prefix: file.stem, // add file name to ids delim: "-" - } + }, }, { removeViewBox: false // keep viewbox @@ -191,10 +186,9 @@ function configOptionCallback(file) { removeDimensions: true // remove height and width } ] - } + }; } - exports.updateCss = createDeviconMinCSS; exports.clean = cleanUp; exports.optimizeSvg = optimizeSvg;