Minify CSS with notepad++
We create many websites and use many themes and CSS files in our work. All new ideas require CSS optimizations to adjust look and feel. Latest SEO practices suggest to minify everything possible on your website from CSS to HTML.
If you are using some software to edit your HTML files than maybe it has some autominifying plugins available. We mostly use Notepad++ for work and thus have the following options:
- Work directly with minified CSS files. It is very difficult.
- Manually minify and unminify files all the time. This is not a good long term solution.
- Use plugin for a revision control system like SVN or GIT and minify the files on commit. The problem with this approach was that GIT searched the whole solution for all CSS files each time we took commit. It went slow and took ages before the commit was done.
- Use minify plugin for Notepad++. We didn’t find any.
- Write a script that will minify CSS files. This is the approach that worked best for us.
Minify CSS in Notepad ++ step by step tutorial
- Create mfy.bat file with the following script:
rem Try to exit early if no file exists if not exist %1 ( echo file does not exist %1 goto :eof ) set nam=%~n1 set ext=%~x1 set fullpath=%~dp1 set do_minify="0" set full_min=%fullpath%\%nam%.min%ext% rem echo %fullpath% if "%ext%"==".js" ( set do_minify=1 ) if "%ext%"==".css" ( set do_minify=1 ) if "%do_minify%"=="1" ( if "%full_min%"=="" ( echo Wrong with %full_min% goto :eof ) minify.cmd -o %full_min% %1 ) else ( echo This is not a file to minify: %1 )
- Save mfy.bat file in your Notepad++ user folder:
%APPDATA%\Notepad++ - Download and install Node.js.
- Open CMD window and install minifier:
npm install minifier -g - In Notepad++ add plugin NppExec (Plugins -> Plugin Manager -> NppExec)
-
Add the following command in Notepad++ (Plugins -> NppExec -> Execute):
C:\Users\[USERNAME]\AppData\Roaming\Notepad++\mfy.bat $(FULL_CURRENT_PATH)Save the script as “Minify”
-
Add a menu item for this new script Minify (Plugins -> NppExec -> Advanced Options).
Choose Minify under Associated script, press Add/Modify button.
Choose “Place to the Macros menu”.
Ok, restart Notepad++.
-
Create a shortcut for Macro.
Macro -> Modify shortcut/Delete Macro …
Under the tab “Plugin Commands”, double click on Minify.
Choose F9 (or some other button) as a shortcut.
Then when you press F9 in Notepad++, the script will create a new minified file that takes less space on a disk and is downloaded faster by browsers.
Related posts:
Comments
Leave a Reply
*
Hello,
I tried this, but if you have spaced in your path it doesn’t work?
Somebody got a fix?
Kind regard, Pieter
Hi Pieter,
Try putting
%full_min%and%1in quotation marks like this:minify.cmd -o "%full_min%" "%1"Kent
Hello,
After executing the command at step 6, where do i save the console generated script? what will be the file’s extension? I saved it in the same folder with mfy.bat, but i can’t find the “Minify” script in NppExec->Advanced Options->Associated Script.
Thank you in advance
Hello,
you don’t need to provide any extension. You save the script inside Notepad++. I have attached a screenshot to step 6.
Hello,
How can we use this minify process for multiple files at a time?
This script is written for Notepad++ and runs on that one file that is currently open in Notepad++. If you want to process multiple files at a time you should modify the script.I didn’t try it though as minifying multiple files would probably be better done outside Notepad++.