Grunt task(s) to minify single HTML file with CSS

Question

I'm doing a login page which I want to be as lightweight as possible for the quickest possible loading time. I have a single dependency (a configuration file) and everything else is coded on a single html file, called index.html.

Although I have no problem in minifying JS, HTML and CSS seperately, e.g, in their respective .js, .html and .css files, I can't seem to find a way to minify a single html file which contains the 3 different aspects.

For the HTML I'm using grunt-contrib-htmlmin but my main goal is to also minify the js on that file.

I know I'm aiming for 2 or 3KB here and I have cache as my friend, etc, but for principle I want to know if there is a straightforward way to achieve or on the other hand I need to assemble the final index.html file after individual minification.

Thanks in advance.

Answer 1

Following the suggestion from @Will I did accomplish this by mashing up the 3 plugins I mentioned plus the grunt-Process HTML that @Will suggested.

I leave you with the steps necessary to solve this, just replace the paths by your own.

My paths:

 .
 ..
 index.html
 styles.css
 index.js

On the console:

npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-htmlmin --save-dev
npm install grunt-processhtml --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-cssmin --save-dev

Gruntfile.js:

module.exports = function (grunt) {

  grunt.initConfig({
     pkg: grunt.file.readJSON('package.json'),
     cssmin: {
       minify: {
         options: {
           banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
         },
         expand: true,
         src: ['*.css', '!*.min.css'],
         dest: 'dist/',
         ext: '.min.css'
       }
     },
     uglify: {
       options: {
         banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
       },
       build: {
         src: 'index.js',
         dest: 'dist/index.min.js'
       }
     },
     processhtml: {
       dist: {
         options: {
           process: true,
           data: {
             title: 'My app',
             message: 'This is production distribution'
           }
         },
         files: {
           'dist/index.min.html': ['index.html']
         }
       }
     },
     htmlmin: {
       dist: {
         options: {
           removeComments: true,
           collapseWhitespace: true
         },
         files: {
           'dist/index.html': 'dist/index.min.html'
         }
       }
     },

     clean: ['dist*//*.min.*']
   });

  grunt.loadNpmTasks('grunt-contrib-htmlmin');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-cssmin');
  grunt.loadNpmTasks('grunt-processhtml');
  grunt.loadNpmTasks('grunt-contrib-clean');
  grunt.registerTask('default', ['cssmin','uglify', 'processhtml', 'htmlmin','clean']);
  grunt.registerTask('build', ['cssmin','uglify', 'htmlmin', 'processhtml']);
};

Answer 2

I think you're looking for grunt-Process HTML and its rather smashing include subtask.

In your index.html file you can include... includes. :)

<!-- build:include my-styles.min.css -->
This will be replaced by the content of my-styles.min.css
<!-- /build -->

If that doesn't work for you, a simple bash script that concats the minified versions could also be run with Grunt-Run.