Assets management tool Massets. Installation and How it works?

Hello everyone, today I will explain massets and how it works massets? First of all massets is asset managment tool for big projects. If your design team is naming assets in this way: Lol.png, xD.jpeg or redCar.svg also If you have to download different icons apart from icon sets as well after a certain point in the project, you tend to forget which icon you embedded. Your teammate might have also embedded that asset. So you need to see assets in white paper also you need to search from the asset name for duplication. So I thought seeing all the assets on a blank page and searching within them could show if there are any duplicates among the assets.

and you can see demo from here:

Massets Installation

• You have to download package in your project:
  npm install massets
yarn add massets

• You have to create massets.config.json file in main route
  

 {
   "path": "<YOUR_ASSETS_FOLDER_PATH>"
 }

• You have to add script in your package.json

 "scripts": {
        .
        .
        .
        "massets": "massets-start"
    },

• npm run massets or yarn massets
• Then it will start in http://localhost:4007/
• that's it :)

How it works?

• First of all, it reads the 'massets.config.json' file in the specified path. Then, it traverses the path and finds PNG, JPEG, JPG, WEBP, and SVG files, using 'glob' for this process.

• It embeds all of these assets within the web project included in the package. The following occurs during the embedding process:

1. It creates assets.json file within the web project included in the package. Then these values write the json file:

• ImageType: Depending on the height and width values of the 'ImageType' image, it can be 1, 2, 3, or these values.

How can i detect ImageType?

If the width/height < 1, then it is considered as type 1. As for the calculation of icons, if the height * width is less than 128 * 128, I simply write the width and height values of the icons. I need to make this calculation because I want to sort the assets in the web project.

2.Title: This title takes its value based on the name of the previous folder of the image. This title ensures that the assets are listed more neatly on the website.

• Then assets.json writing process is finished. I run the script with an 'sh' extension inside the web project using the shell library. This script performs the necessary operations for the web project to function.

If you want to see the package: massets
You can also follow me on Twitter: twitter