Minify CSS with notepad++

By , last updated December 2, 2019

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.

minified css file sfparent theme studiofreya

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 -> Plugins Admin -> 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.
    Another version to try:
    cd $(FULL_CURRENT_PATH) mfy.bat $(FILE_NAME)
  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.style minify css notepad howto