Grunt Task(s) To Minify Single Html File With Css And Javascript

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 i

Solution 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']);
};

Solution 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.