Attività grunt per minimizzare un singolo file HTML con CSS e Javascript

Question

Sto facendo una pagina di accesso che voglio essere il più leggero possibile per il tempo di caricamento più veloce possibile. Ho una singola dipendenza (un file di configurazione) e tutto il resto è codificato su un singolo file html, chiamato index.html.

Anche se non ho problemi nel ridimensionare JS, HTML e CSS separatamente, ad esempio, nei rispettivi file .js, .html e .css, non riesco a trovare un modo per minimizzare un singolo file html che contiene i 3 diversi aspetti.

Per l'HTML sto usando grunt-contrib-htmlmin ma il mio obiettivo principale è anche quello di minificare il js su quel file.

So che sto mirando a 2 o 3 KB qui e ho cache come amico, ecc., Ma per principio voglio sapere se c'è un modo semplice per raggiungere o d'altra parte ho bisogno di assemblare il file index.html finale dopo la minificazione individuale.

Grazie in anticipo.

Answer 1

Seguendo il suggerimento di @Will ho ottenuto questo risultato schiacciando i 3 plug-in menzionati più il grunt-Process HTML suggerito da @Will.

Vi lascio con i passaggi necessari per risolvere questo, basta sostituire i percorsi da soli.

miei percorsi:

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

Sulla 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

Penso che stiate cercando grunt-Process HTML e il suo piuttosto strepitoso include subtask.

Nel file index.html è possibile includere ... include. :)

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

Se questo non funziona per voi, un semplice script bash che Inserto le versioni minified potrebbe anche essere eseguito con Grunt-Run.