Grunt usemin前端自動化打包流程

時間 2019-12-08

原文原文鏈接

前端優化是儘可能減小http請求，因此咱們須要儘可能合併壓縮文件，而後調用壓縮後的文件，好比多個css文件壓縮成一個，多個js文件合併壓縮等，usemin可以自動在html中使用壓縮後的文件，達到上面的目的。css

上圖是完整打包後的文件目錄，原始目錄是assets,打包發佈的文件是dist.html

gruntfile.js文件內容：前端

module.exports = function(grunt) {

    grunt.config.init({
      clean:{
          src:"dist/"
      },
      useminPrepare: {
          html: 'index.html',
          options: {
            dest: 'dist'
          }
      },
        usemin: {
            html: ['dist/index.html']
        },
        uglify: {
            'dist/js/app.min.js': ['assets/js/*.js']
        },
        copy: {
            html: {
                src: './index.html',
                dest: 'dist/index.html'
            }
        },
        cssmin:{
                'dist/css/app.min.css': ['assets/css/*.css']
        }
    });
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-cssmin');
    grunt.loadNpmTasks('grunt-usemin');
    grunt.registerTask('default',[
        'clean',
        'copy:html',
        'useminPrepare',
        'uglify',
        'cssmin',
        'usemin'
    ]);
}

原始的index.htmlapp

<!DOCTYPE html>
<html>
  <head>
    <title>Usemin test</title>
    <!-- build:css dist/css/app.min.css -->
      <link rel="stylesheet" type="text/css" href="./assets/css/style.css" media="screen" />
    <!-- endbuild -->
  </head>
  <body>
  
  </body>
  <!-- build:js dist/js/app.min.js -->
    <script src="./assets/js/foo.js"></script>
    <script src="./assets/js/bar.js"></script>
  <!-- endbuild -->  
</html>

打包後的index.html前端優化

<!DOCTYPE html>
<html>
  <head>
    <title>Usemin test</title>
    <link rel="stylesheet" href="dist/css/app.min.css" media="screen"/>
  </head>
  <body>
  
  </body>
  <script src="dist/js/app.min.js"></script>
</html>