Minify CSS with notepad++

Edit 25th of April, 2018: Added support for minifying files containing spaces.

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

1. 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
   )
   

2. Save mfy.bat file in your Notepad++ user folder: %APPDATA%\Notepad++
3. Download and install Node.js.
4. Open CMD window and install minifier:
   npm install minifier -g
5. In Notepad++ add plugin NppExec (Plugins -> Plugin Manager -> NppExec)
6. Add the following command in Notepad++ (Plugins -> NppExec -> Execute):$(SYS.APPDATA)\Notepad++\mfy.bat "$(FULL_CURRENT_PATH)"Save the script as “Minify” or something thereof.
   
7. 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++.

8. 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.

9. 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:  

CSS tutorial: div over div and z-index

Image grid layout with css example

WordPress Theme development hacks: body height

WordPress Plugin development by example – SF Generate Tags

CSS show div on hover

Comments

1. 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

     • Taco April 20, 2018 Leave a Reply

       this does not seem to fix it. I have this now, but I still cannot minify when there’s a space in the path file does not exist G:\My

       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
       )

       • Kent April 25, 2018 Leave a Reply

         Hi,

         I’ve updated the post to allow for minifying files with filenames containing spaces.
         There are subtle differences in both the script (mfy.bat) and the executed command in Notepad++.

         Kent

2. 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.

3. 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++.

4. jax August 8, 2017 Leave a Reply

   It is not working for html files

5. mtness July 16, 2018 Leave a Reply

   To autohide the NPPExec console, just place NPP_CONSOLE 0 on top of the NPPExec code!

6. Anthony August 28, 2018 Leave a Reply

   In step 4 (npm install minifier -g), the following warning is given:

   npm WARN deprecated minifier@0.8.1: please don’t use. see readme (https://github.com/fizker/minifier) for details

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>