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），以在

>中对PNG，JPG和GIF映像进行积极优化，输出到

>。

<code class="language-javascript">imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}</code>

optimizationLevel: 5 src/images dist/

>缩小JavaScript代码。它删除空格并缩短变量/功能名称。 有用的选项包括

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

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

<code class="language-javascript">var MyApplication = function() {
   var data = 'hello';

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

   this.showData = function() {
      return data;
   }
};</code>

<code class="language-javascript">var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};</code>

>压缩CSS文件，类似于

<code class="language-javascript">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'],
      }
   }
}</code>

，提供了

>选项。 简单的配置：

<code class="language-javascript">imagemin: {
   dist: {
      options: {
        optimizationLevel: 5
      },
      files: [{
         expand: true,
         cwd: 'src/images',
         src: ['**/*.{png,jpg,gif}'],
         dest: 'dist/'
      }]
   }
}</code>

这将在src/css中减小所有CSS，并输出到dist/css/style.min.css>。

grunt-uncss

>删除未使用的CSS，减少文件大小。 当使用Bootstrap或Foundation等框架时，这特别有益。 grunt-uncss（用于排除选择器）和ignore（用于忽略样式表）之类的选项可用。 示例：ignoreSheets

<code class="language-javascript">var MyApplication = function() {
   var data = 'hello';

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

   this.showData = function() {
      return data;
   }
};</code>

grunt-contrib-htmlmin

>

>缩小HTML，提供适度的尺寸减小。 虽然影响可能很小，尤其是在GZIP压缩的情况下，但每一个都会有所帮助。 配置：grunt-contrib-htmlmin

<code class="language-javascript">var MyApplication=function(){var a="hello";this.sum=function(a,b){return a+b},this.showData=function(){return a}};</code>

这将处理

>中的所有HTML文件，删除评论和崩溃的空格，然后输出到srcdist/结论

这五项艰巨的任务提供了直接的方法来显着提高网站性能。 它们的易用性使它们成为增强用户体验的宝贵工具。 您是否使用过这些任务？ 分享您的经验和最喜欢的怪异任务！ 下面提供了有关咕unt和网站性能的全面常见问题解答部分。> （FAQ部分将在此处遵循，反映了原始FAQ的结构和内容，但要改写以获得更好的流动和简洁。）

以上是5个贪婪的任务，可以改善您网站的性能的详细内容。更多信息请关注PHP中文网其他相关文章！