Learn how to minimize and map CSS stylesheet files using a no frills Windows Forms project activated through a Visual Studio external tools menu item.
Minification dramatically improves site speed and accessibility, directly translating into a better user experience as this speeds up websites.
CSS map file is a JSON format file that connects the CSS file to its source files, further, it is often written in preprocessors (e.g., Less, Sass, Stylus, etc.), allowing for live debugging of the source files from the web browser. However, it is also known as a source map.
By using a Forms project rather than a Visual Studio extension ensure continued functionality in later versions of Visual Studio plus the code is simple, easy to modify if a developer wants to change the current behavior.
From Visual Studio's Tool menu, select External tools and add a new item.
- For command, browse to the executable folder and select the executable.
- Title, give a meaning full name.
To minimize and create a map file, click the button, traverse to the file to work on and click open which then creates the two files. If Visual Studio is open to the same folder the update is immediate.
Besides that this utility does for novice developers that are some good learning in the source code to learn from.
Clone the following GitHub repository.
In this application the map file is created in the same folder as the original file. Another option is to create the map file in another folder.
By removing -o . from the current code, using css-minify -f filename will have a new folder created css-dist and the .min file is placed in this folder.
To process an entire folder css-minify -d sourcedir. For this to work, follow what is done in current code, set the current folder using Environment.CurrentDirectory, otherwise css-minify will not process the intended folder.
Although the repository is not actively being worked on, does not mean its not worth using. Consider forking the repository.
If a developer does not using Visual Studio, these two IDE offer minimizing and creating map files.
Note interesting enough, Rider depends on UglifyJS in a file watcher.