5个贪婪的任务，可以改善您网站的性能

键突出显示：

>，用于JavaScript缩小的
• >grunt-contrib-imagemingrunt-contrib-uglify>用于CSS压缩。grunt-contrib-cssmin
Other valuable Grunt tasks are
• , which removes unused CSS, and grunt-uncss, which minifies HTML. 尽管HTML的降低可能只会产生较小的文件尺寸减少，但每个优化都需要提高Web性能。grunt-contrib-htmlmin。
这些用户友好的咕unt任务可以通过加速网站加载时间来大大提高用户体验。 他们无缝集成在您的工作流程中提高了效率和有效性。
• 在当今的数字景观中，网站性能至关重要。 如先前的SitePoint文章（例如，“资源定时API简介”，“发现用户定时API”，以及Craig Buckler的“减少页面重量的完整指南”），理解和解决性能瓶颈是至关重要的。 像Grunt和Gulp这样的任务跑步者可以自动化许多手动优化任务，从而改善您的工作流程。本文详细介绍了增强网页性能的五项咕unt任务。

图像是网站大小的主要贡献者。 httparchive.org的统计数据揭示图像通常占页面总数的63％以上。 通常，图像不会最佳地压缩。 grunt-contrib-imagemin通过为公共图像格式提供优化器来解决此问题：

grunt-contrib-imagemin（gif）

• （JPEG） gifsicle
（png）
• jpegtran（SVG）
• optipng这是一个示例配置：
• svgo此配置使用
（0-7，默认3），以在

>。

imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}

optimizationLevel: 5 src/images dist/

（用于调试）和（用于添加元数据）。 grunt-contrib-uglify考虑此JavaScript：

降低将其转换为：grunt-contrib-uglify sourceMap banner配置示例：

var MyApplication = function() {
   var data = 'hello';

   this.sum = function(first, second) {
      return first + second;
   }

   this.showData = function() {
      return data;
   }
};

var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};

uglify: {
   dist: {
      options: {
         sourceMap: true,
         banner: '/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */'
      },
      files: {
         'dest/output.min.js': ['src/input.js'],
      }
   }
}

>选项。 简单的配置：

imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}

var MyApplication = function() {
   var data = 'hello';

   this.sum = function(first, second) {
      return first + second;
   }

   this.showData = function() {
      return data;
   }
};

var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};