{"id":4474,"date":"2015-10-29T22:30:40","date_gmt":"2015-10-30T04:30:40","guid":{"rendered":"http:\/\/blog.eastfist.com\/?p=4474"},"modified":"2015-10-29T22:30:40","modified_gmt":"2015-10-30T04:30:40","slug":"how-to-minify-html-with-notepad","status":"publish","type":"post","link":"https:\/\/eastfist.com\/blog\/2015\/10\/29\/how-to-minify-html-with-notepad\/","title":{"rendered":"How To Minify HTML With Notepad++"},"content":{"rendered":"

By Chongchen Saelee<\/p>\n

When you want to optimize HTML processing speed, you might want to minify the HTML code. This is done by removing all whitespaces, assuming your code is strongly-typed and syntax and structure is all correct. You can do this manually, which will be a pain, or use the help of an advanced text editor.<\/p>\n

Download the latest version of Notepad++<\/a> (as of today, the latest version is 6.8.6). It’s free and way more robust than your standard Windows Notepad (obviously, if you can’t tell by the name).<\/p>\n

UPDATE: More Comprehensive Minify HTML (Remove Whitespace + Line Breaks)<\/h2>\n

I figured out how to use regular expressions (RegEx) via Search and Replace which really finetunes the minifying process. Check this out:<\/p>\n

\"Notepad++<\/a>
Notepad++ Ugly Html Code Example<\/figcaption><\/figure>\n

1. Go to Search menu.
\n2. Click Replace.
\n3. Enable Regular Expression radio button.
\n

\"Notepad++<\/a>
Notepad++ Regular Expression (RegEx) Search and Replace<\/figcaption><\/figure><\/p>\n

4. Type in Find what: \\s{2,50}
\n5. Type in Replace with: _ (type single space instead of underscore. not do not type \\s)
\n6. Find the following regex and replace them as such:<\/p>\n\n\n\n\n\n\n\n
Find what:<\/td>\nReplace with:<\/td>\nExplanation<\/td>\n<\/tr>\n
\\s{2,50}<\/td>\n_<\/td>\nReplace with single space, not an underscore. And don’t type \\s. What you’re doing here is finding any matches for spaces \\s with lengths between 2 and 50. The delimiter can actually be more than 50, but it’s not reasonable. You can put whatever you want if you do it yourself. You want only one space between any two nonspace characters.<\/td>\n<\/tr>\n
>\\s{2,50}<\/td>\n><\/td>\nGet rid of any space between closing tags and first nonspace character.<\/td>\n<\/tr>\n
\\s{2,50}<<\/td>\n<<\/td>\nGet rid of any space before opening tag and possible nonspace character.<\/td>\n<\/tr>\n
>\\r\\n<\/td>\n><\/td>\nRemove any linebreaks, aka “newline” aka carriage return \\r + line feed \\n that may exist after closing tag.<\/td>\n<\/tr>\n
\\r\\n<<\/td>\n<<\/td>\nRemove any linebreaks before opening tag.<\/td>\n<\/tr>\n<\/table>\n
\"Notepad++<\/a>
Notepad++ Better Minify HTML<\/figcaption><\/figure>\n

Of course, you can always save out the steps as a macro. Just follow the instructions from previous tutorial (below). But do note, when you save out this minified HTML file, don’t save over your original code. You will lose all the formatting and Notepad++ won’t be able to fold your code for you next time you want to edit it. So save a copy.<\/p>\n

Otherwise, you can alter your shortcuts.xml file in %AppData%\\Roaming\\Notepad++ with this xml:<\/p>\n

shortcuts_htmlMinify.xml<\/a><\/p>\n

\"Notepad++<\/a>
Notepad++ shortcuts.xml file found in your %AppData%\\Roaming\\Notepad++ folder stores your macros<\/figcaption><\/figure>\n
\"Notepad++<\/a>
Notepad++ shortcuts.xml Add new macro<\/figcaption><\/figure>\n

Copy the xml into the Macros XML Group in your shortcuts.xml file. WARNING!! Make sure you backup your original shortcuts.xml file first before you alter it. I can’t guarantee you it will work. Also, make sure you’re altering the shortcuts.xml file in your %AppData%\/Roaming\/Notepad++ folder instead of the one in your install folder. Otherwise, just record the macro manually following the steps above.<\/p>\n

Basic Minify HTML (Removing Line Breaks)<\/h2>\n
\"Notepad++<\/a>
Notepad++ Normal, clean readable HTML code<\/figcaption><\/figure>\n

1. Go to Search<\/strong> menu.
\n2. In Search Mode<\/strong>, enable Extended (\\n, \\r, \\t, \\0, \\x…)<\/strong> radio button.<\/p>\n

\"Notepad++<\/a>
Notepad++ Search and Replace Settings To Remove Whitespace<\/figcaption><\/figure>\n

3. Type in Find what:<\/strong> >\\r\\n<\/code>. What you’re doing is replacing any New Line \\r\\n<\/code>, which is comprised of Carriage Return \\r<\/code> + Line Feed \\n<\/code> found after a closing bracket ><\/code> with a regular closing bracket. This brings the next line back to the preceding line.
\n4. Type in Replace with:<\/strong> ><\/code>
\n5. Click Replace All<\/strong>.
\n6. Type in Find what:<\/strong> \\r\\n<<\/code>
\n7. Type in Replace with:<\/strong> <<\/code>
\n8. Click Replace All<\/strong>.<\/p>\n

\"Notepad++<\/a>
Notepad++ Minified HTML<\/figcaption><\/figure>\n

And to make this process even faster, thank goodness for macros. You can use Notepad++ macro recorder to record these steps in advanced and just call them again the next time you want to minify your HTML. How convenient!<\/p>\n

How To Record an HTML Minify Macro:<\/h2>\n

1. Go to Macro menu.
\n2. Click Start Recording.
\n

\"Notepad++<\/a>
Notepad++ Start Recording a Macro<\/figcaption><\/figure><\/p>\n

3. Repeat the steps 1 to 8 for Search and Replace as listed above.
\n4. Go to Macro menu, click Stop Recording.
\n5. Go to Macro menu, click Save Current Recorded Macro…
\n6. Type in “MinifyHTML” or whatever you desire.
\n

\"Notepad++<\/a>
Notepad++ Macro Shortcut Settings<\/figcaption><\/figure><\/p>\n

7. Now when you click Macro menu, you will see your previously recorded macro “MinifyHTML” and all you have to do is click that for immediate minifying! Sweet!
\n

\"Notepad++<\/a>
Notepad++ Macro Shortcut Saved<\/figcaption><\/figure><\/p>\n

Alternatively, but not best results:<\/h2>\n

1. Go to Edit menu.
\n2. Go to Blank Operations
\n3. Select ‘Remove Unnecessary Blank and EOL’ or ‘EOL to Space’.<\/p>\n

But this result leaves space padding for content inside tags, which is optimal minify-sation. I haven’t found a feature in the Blank Operations that complete the minify process either.<\/p>\n

Summary<\/h2>\n

This method is only to remove linebreaks. Of course, the comprehensive minify process would include fixing unclosed HTML tags (those that require it anyway), minimizing spaces in innerHTML content, removing comments, etc. Anyway, I hope this very basic method helps!<\/p>\n","protected":false},"excerpt":{"rendered":"

By Chongchen Saelee When you want to optimize HTML processing speed, you might want to minify the HTML code. This is done by removing all whitespaces, assuming your code is strongly-typed and syntax and structure is all correct. You can do this manually, which will be a pain, or use the help of an advanced […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-4474","post","type-post","status-publish","format-standard","hentry","category-tech"],"_links":{"self":[{"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/posts\/4474","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/comments?post=4474"}],"version-history":[{"count":0,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/posts\/4474\/revisions"}],"wp:attachment":[{"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/media?parent=4474"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/categories?post=4474"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/eastfist.com\/blog\/wp-json\/wp\/v2\/tags?post=4474"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}