Grunt tarea (es) para minificar archivo HTML individual con CSS y Javascript

Estoy haciendo una página de inicio de sesión que quiero que sea lo más liviana posible para el tiempo de carga más rápido posible. Tengo una sola dependencia (un archivo de configuración) y todo lo demás está codificado en un solo archivo html, llamado index.html .

Aunque no tengo ningún problema en minificar JS, HTML y CSS por separado, por ejemplo, en sus respectivos archivos .js, .html y .css, parece que no puedo encontrar una manera de minificar un solo archivo html que contenga los 3 aspectos diferentes .

Para el HTML estoy usando grunt-contrib-htmlmin pero mi objective principal es también minificar el js en ese archivo.

Sé que apunto 2 o 3KB aquí y tengo memoria caché como mi amigo, etc., pero, por principio, quiero saber si hay una manera directa de lograrlo o, por otro lado, tengo que armar el index.html final archivo después de la minificación individual.

Gracias por adelantado.

Siguiendo la sugerencia de @Will logré esto combinando los 3 complementos que mencioné más el HTML de proceso gruñón que @Will sugirió.

Te dejo con los pasos necesarios para resolver esto, solo reemplaza los caminos por tu cuenta.

Mis caminos:

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

En la consola:

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

Creo que estás buscando HTML de procesos roncos y es una subtarea de inclusión bastante aplastante.

En su archivo index.html puede incluir … incluye. 🙂

  This will be replaced by the content of my-styles.min.css  

Si eso no funciona para usted, un simple script bash que concatena las versiones minificadas también podría ejecutarse con Grunt-Run .