Nhiệm vụ Grunt để rút gọn một tệp HTML với CSS và Javascript

Question

Tôi đang làm một trang đăng nhập mà tôi muốn càng nhẹ càng tốt cho thời gian tải nhanh nhất có thể. Tôi có một phụ thuộc duy nhất (một tệp cấu hình) và mọi thứ khác được mã hóa trên một tệp html duy nhất, được gọi là index.html.

Mặc dù tôi không có vấn đề gì trong việc giảm thiểu JS, HTML và CSS một cách riêng biệt, ví dụ: trong các tệp .js, .html và .css tương ứng của chúng, tôi dường như không tìm cách rút gọn một tệp html duy nhất chứa 3 khía cạnh khác nhau.

Đối với HTML tôi đang sử dụng grunt-contrib-htmlmin nhưng mục tiêu chính của tôi cũng là giảm thiểu các j trên tệp đó.

Tôi biết tôi đang nhắm đến 2 hoặc 3KB ở đây và tôi có bộ nhớ cache là bạn của tôi, v.v. nhưng về nguyên tắc tôi muốn biết nếu có cách đơn giản để đạt được hoặc mặt khác, tôi cần phải lắp ráp tệp index.html cuối cùng sau khi rút gọn từng cá nhân.

Xin cảm ơn trước.

Answer 1

Làm theo đề xuất từ ​​@Tôi đã thực hiện điều này bằng cách nghiền 3 plugin tôi đã đề cập cộng với số grunt-Process HTML mà @Will đề xuất.

Tôi để lại cho bạn các bước cần thiết để giải quyết vấn đề này, chỉ cần thay thế đường dẫn của riêng bạn.

con đường của tôi:

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

Trên giao diện điều khiển:

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

Tôi nghĩ bạn đang tìm kiếm grunt-Process HTML và thay vì đập vỡ include subtask.

Trong tệp index.html của bạn, bạn có thể bao gồm ... bao gồm. :)

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

Nếu điều đó không làm việc cho bạn, một kịch bản đơn giản mà bash concats các phiên bản rút gọn cũng có thể được chạy với Grunt-Run.