The problem
I have a lot of .php files, mostly containing HTML, but also some PHP lines on top (e.g. form trigger code or similar). So they look like
<?php
if($someValue){
//doSth
}
//more content
?>
<!DOCTYPE html>
<html lang="de">
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Content and scripts here -->
<script src=".12.0/jquery.min.js"></script>
</body>
</html>
The goal
My goal is to minify the HTML (and maybe even the inline javascript, but that's just a little extra), without touching the PHP on top. I'm using Gulp as automated build tool and would like to see a solution using this tool and any extra packages as they are needed.
The problem
I have a lot of .php files, mostly containing HTML, but also some PHP lines on top (e.g. form trigger code or similar). So they look like
<?php
if($someValue){
//doSth
}
//more content
?>
<!DOCTYPE html>
<html lang="de">
<head>
<title>My Website</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<!-- Content and scripts here -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
</body>
</html>
The goal
My goal is to minify the HTML (and maybe even the inline javascript, but that's just a little extra), without touching the PHP on top. I'm using Gulp as automated build tool and would like to see a solution using this tool and any extra packages as they are needed.
Share Improve this question asked Oct 17, 2016 at 15:25 TheAlexLichterTheAlexLichter 7,2898 gold badges49 silver badges76 bronze badges 8- Have you considered using gulp-htmlmin? Inline JS can be very tricky to minimise, especially if you have PHP tags interspersed in between—the easiest way is to avoid using inline JS, if ever possible. – Terry Commented Oct 17, 2016 at 15:29
- @Terry Yes, I've looked into the package already, but I'm not sure if it supports PHP inside of the HTML file. Haven't had the time yet to test it out though. The problem with inline js is, as stated, just a little extra which I could also live without. My main problem is the PHP block at the beginning (or sometimes inbetween the HTML) – TheAlexLichter Commented Oct 17, 2016 at 15:32
- But why? It is the sourcecode, I suppose you want to keep it readable, and minify rather output generated by your app, not it's code. Are you trying to obfuscate it? – michaJlS Commented Oct 17, 2016 at 15:48
- @michaJlS I want to minify the HTML to decrease the size of the file and improve the loading time of the page. – TheAlexLichter Commented Oct 17, 2016 at 15:52
- If you have PHP code in your templates/whatever, then this code is expected to be interpreted by PHP later, so it should be modified in PHP on-fly or by http server developers.google.com/speed/pagespeed/module – michaJlS Commented Oct 17, 2016 at 16:36
2 Answers
Reset to default 18The gulp-htmlmin module uses the html-minifier module, which has plenty of options (displayed on both its npmjs.com and github pages) that can be used. The option we will focus on is ignoreCustomFragments.
var gulp = require(gulp),
htmlmin = require(gulp-htmlmin);
gulp.task('htmltask', function(){
return gulp.src(['./dev/*.html','./dev/*.php'])
.pipe(htmlmin({
collapseWhitespace: true,
ignoreCustomFragments: [ /<%[\s\S]*?%>/, /<\?[=|php]?[\s\S]*?\?>/ ]
}))
.pipe(gulp.dest('./site'));
});
In the above code, you see we are using ignoreCustomFragments with the regex /<\?[=|php]?[\s\S]*?\?>/ to ignore code starting with <? and <?php and ending with ?>.
By default, html-minifier ignores php, so you don't have to worry about setting ignoreCustomFragments.
EDIT Thanks amersk
Some php files you work with may not have closing tags, for example many WordPress files do not. An alternative would be to use the following instead:
ignoreCustomFragments: [/<\?[\s\S]*?(?:\?>|$)/]
This works for me !
// Gulp.js configuration
var
// modules
gulp = require('gulp'),
newer = require('gulp-newer'),
htmlmin = require('gulp-htmlmin')
// development mode?
devBuild = (process.env.NODE_ENV !== 'production'),
// folders
folder = {
src: 'src/',
build: 'build/'
}
gulp.task('minify', () => {
return gulp.src('src/*.html')
.pipe(htmlmin({ collapseWhitespace: true }))
.pipe(gulp.dest('dist'));
});
;