Grunt Aufgabe (n) zu minimieren einzelne HTML-Datei mit CSS und Javascript

Question

Ich mache eine Login-Seite, die ich so leicht wie möglich für die schnellste mögliche Ladezeit sein möchte. Ich habe eine einzige Abhängigkeit (eine Konfigurationsdatei) und alles andere ist in einer einzigen HTML-Datei codiert, genannt index.html.

Obwohl ich kein Problem habe, JS, HTML und CSS separat zu minimieren, zB in ihren jeweiligen .js-, .html- und .css-Dateien, kann ich keine Möglichkeit finden, eine einzelne HTML-Datei zu minimieren die 3 verschiedenen Aspekte.

Für das HTML verwende ich grunt-contrib-htmlmin, aber mein Hauptziel ist es, auch die js auf dieser Datei zu minimieren.

Ich weiß, ich ziele hier auf 2 oder 3KB und ich habe Cache als mein Freund, etc, aber für den Grundsatz möchte ich wissen, ob es einen direkten Weg zu erreichen oder auf der anderen Seite muss ich das zusammenbauen finale index.html Datei nach individueller Verkleinerung.

Vielen Dank im Voraus.

Answer 1

Nach dem Vorschlag von @Will habe ich dies erreicht, indem ich die 3 Plugins, die ich erwähnt habe, plus die grunt-Process HTML, die @Will vorgeschlagen hat, gemastert habe.

Ich lasse Sie mit den notwendigen Schritten, um dies zu lösen, nur die Pfade durch Ihre eigenen ersetzen.

Meine Wege:

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

Auf der Konsole:

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

Ich denke, Sie suchen nach grunt-Process HTML und es ist ziemlich überwältigend include subtask.

In Ihrer index.html Datei können Sie ... einschließen. :)

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

Wenn das nicht für Sie arbeitet, ein einfacher Bash-Skript, das die verkleinerte Versionen concats auch mit Grunt-Run ausgeführt werden kann.