Grunt zadanie (s), aby zminimalizować pojedynczy plik HTML z CSS i JavaScript

Question

Robię stronę logowania, który chcę być tak lekki, jak to możliwe, aby możliwie najszybciej załadować. Mam jedną zależność (plik konfiguracyjny) i wszystko inne jest zakodowane w jednym pliku html, o nazwie index.html.

Chociaż nie mam problemu z minimalizacją JS, HTML i CSS oddzielnie, np. W ich odpowiednich plikach .js, .html i .css, nie mogę znaleźć sposobu na zminimalizowanie pojedynczego pliku html, który zawiera 3 różne aspekty.

Dla kodu HTML używam grunt-contrib-htmlmin, ale moim głównym celem jest również zminimalizowanie pliku js w tym pliku.

Wiem, że dążę do 2 lub 3 KB tutaj i mam pamięć podręczną jako mój przyjaciel, itp., Ale dla zasady chcę wiedzieć, czy istnieje prosty sposób na osiągnięcie, czy też z drugiej strony muszę złożyć ostateczny plik index.html po indywidualnej minifikacji.

Z góry dziękuję.

Answer 1

Postępując zgodnie z sugestią z @Will, osiągnąłem to przez połączenie trzech wymienionych wtyczek plus grunt-Process HTML, które @Will zasugerował.

Zostawiam ci kroki konieczne do rozwiązania tego problemu, po prostu zastąp ścieżki własnymi.

Moje ścieżki:

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

Na konsoli:

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

Wydaje mi się, że szukasz grunt-Process HTML i jego raczej niszczącej include subtask.

W pliku index.html można uwzględnić ... zawiera. :)

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

Jeśli to nie zadziała, to prosty skrypt bash że concats wersje minified można także uruchomić z Grunt-Run.