Skip to content

Commit

Permalink
Gulpfile Edits (devicons#759)
Browse files Browse the repository at this point in the history
* Fixed main var/constants

Formatting as well

* Made gulp a constant

* Removed extra comma

Co-authored-by: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com>

* Removed extra () the things i cant spell

Co-authored-by: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com>

* Removed extra () the things i cant spell

Co-authored-by: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com>

* Removed extra () the things i cant spell

Co-authored-by: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com>

* Removed extra comma

Co-authored-by: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com>

* Apply all suggestions from Thomas-Boi

Co-authored-by: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com>

Co-authored-by: Thomas Bui <43018778+Thomas-Boi@users.noreply.github.com>
  • Loading branch information
roythearsonist and Thomas-Boi authored Jul 18, 2021
1 parent d47a257 commit 192d54f
Showing 1 changed file with 95 additions and 101 deletions.
196 changes: 95 additions & 101 deletions gulpfile.js
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -19,34 +19,33 @@ const finalMinSCSSName = "devicon.min.scss";
* css files and compiling them together using Sass.
*/
async function createDeviconMinCSS() {
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");

return gulp.src(finalMinSCSSName)
.pipe(sass.sync({"outputStyle": "compressed"}).on('error', sass.logError))
.pipe(gulp.dest('./'));
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");

return gulp
.src(finalMinSCSSName)
.pipe(sass.sync({ outputStyle: "compressed" }).on("error", sass.logError))
.pipe(gulp.dest("./"));
}

/**
* Create the devicon-alias.scss and the
* devicon-colors.css from the devicon.json.
*/
async function createCSSFiles() {
const deviconJson = JSON.parse(
await fsPromise.readFile(
path.join(__dirname, deviconJSONName), "utf8"
)
);

await Promise.all([
createAliasSCSS(deviconJson),
createColorsCSS(deviconJson)
])
const deviconJson = JSON.parse(
await fsPromise.readFile(path.join(__dirname, deviconJSONName), "utf8")
);

await Promise.all([
createAliasSCSS(deviconJson),
createColorsCSS(deviconJson)
]);
}

/**
Expand All @@ -55,123 +54,119 @@ 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.
* @return a string representing a css statement of the
* 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;

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 aliases attr
aliases.forEach(aliasObj => {
cssClasses.push(`.devicon-${name}-${aliasObj["alias"]}.colored`);
});

return `${cssClasses.join(",")}{color: ${color}}`;
}).join(" ");

let cssPath = path.join(__dirname, colorsCSSName);
return fsPromise.writeFile(cssPath, statements, "utf8");
// 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 "";
}

// 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`);
});

return `${cssClasses.join(",")}{color: ${color}}`;
})
.join(" ");

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,
];

return Promise.all(
fileNames.map(name => {
try {
let filePath = path.join(__dirname, name);
return fsPromise.unlink(filePath);
} catch(e) {
console.log(e);
}
})
);
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);
}
})
);
}


//////// 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.
*/
Expand All @@ -182,7 +177,7 @@ function configOptionCallback(file) {
prefixIds: {
prefix: file.stem, // add file name to ids
delim: "-"
}
},
},
{
removeViewBox: false // keep viewbox
Expand All @@ -191,10 +186,9 @@ function configOptionCallback(file) {
removeDimensions: true // remove height and width
}
]
}
};
}


exports.updateCss = createDeviconMinCSS;
exports.clean = cleanUp;
exports.optimizeSvg = optimizeSvg;

0 comments on commit 192d54f

Please sign in to comment.