Minify and compile single file using Gulp

Question

There is a 1-pager website. It consists of index.php that includes numerous sections (other PHP files). Each of the section includes links to JavaScript files.

---

Questions: is it possible to generate a single minified PHP file, that will have a single link to a single minified JS file (something similar to https://www.npmjs.com/package/gulp-sass)?

Answer 1

I have managed to resolve this issue myself. It is possible to achieve the desired result with just 2 tools:

• Gulp Concat
• Gulp Handle Bar Include

With concat I was able to concatenate all *.js files into logic.js like this:

gulp.task('scripts', function () {
    return gulp.src('src/**/*.js')
        .pipe(concat('logic.js'))
        .pipe(uglify())
        .pipe(gulp.dest('dist/js'));
});

With ghfi I was able to include all included PHPs and then minify the result into a single index.php:

gulp.task('php', function () {
    gulp.src('src/index.php')
        .pipe(gulpHandlebarsFileInclude())
        .pipe(htmlmin({
            collapseWhitespace: true
        }))
        .pipe(gulp.dest('dist'));
});

Had to include child-PHP files indside the parent one like this:

{{ fileInclude 'src/foo.php' }}

PS: the person who down-voted my question - you are truly amazing.

Answer 2

Not out of box, but you can use static site generators like Jekyll, Harp.

This might require to drop php templating for something like liquid, and this way Jekyll CLI can interpret your includes and general page structure and generate ready-to-push html files that can be minified by gulp task.

Jekyll

Harpjs

gulp-htmlmin

On a side note: if you are concerned about performance, minifying html is rarely seen as gain is marginable, especially if your server has gzip enabled on.