Minify CSS with notepad++

By Tatyana, last updated January 10, 2017

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.

Comments

Pieter October 20, 2016 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
- Kent Fagerjord October 20, 2016 Leave a Reply
  
  Hi Pieter,
  
  Try putting %full_min% and %1 in quotation marks like this:
  
  minify.cmd -o "%full_min%" "%1"
  
  Kent
Johnny Pina December 11, 2016 Leave a Reply

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
- Tatyana January 10, 2017 Leave a Reply
  
  Hello,
  you don’t need to provide any extension. You save the script inside Notepad++. I have attached a screenshot to step 6.
Prashant May 4, 2017 Leave a Reply

Hello,

How can we use this minify process for multiple files at a time?
- Tatyana May 6, 2017 Leave a Reply
  
  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++.