如何提高网站性能？ 必须学会的5 个 Grunt任务

做完一个网站，特别是现在这样的网络环境，很多人都在做网站优化，为了在以百度为代表的搜索引擎上争得一席之地，网站优化有很多需要注意的细节，当然也有很多方式方法。网站优化是一门很深的学问，南京锐盛互联是一家综合性的网络营销公司，如果您有任何想要了解的，请联系锐盛互联官网（）或直接联系我们（***）。下面就分享一下提高网站性能的5个Grunt任务。

提高网站性能的 5 个 Grunt任务

 在之前我多次提过如今关心的主要问题是，如何实现良好的性能以及你应该如何努力实现web页面的快速响应。在我的一些关于JavsScript API的文章中，比如 介绍Resource Timing API 及 深入User Timing API，我对拖慢你的项目的根源进行了全面分析。在年前，Craig Buckler在他的文章-《The Complete Guide to Reducing Page Weight》中也涉及到这个话题。

 如果你没有停留在过去，你可能使用过一些任务自动管理工具（比如Grunt或Gulp）来改善我们的工作流程，它们可以自动完成我们之前要手动完成的工作。在这篇文章中我将会描述5个Grunt任务，帮助我们提高我们的网页性能。

grunt-contrib-imagemin

我想说的第一个任务是grunt-contrib-imageimin。我想先讨论它的原因是，图片是拖慢网站性能的主要杀手！ 

如果你看过***上的统计，你会发现图片占了整个页面大小的63%还多。如此臃肿的原因是图片通常没有被压缩到尽可能小的程度。grunt-contrib-imageimin是可以用来解决这个问题的其中一个任务。

 这个任务拥有以下的一些优化器，它们可以压缩web上的绝大多数图片格式：

gifsicle压缩GIF图片

jpegtran压缩JPEG图片

optipng压缩PNG图片

svgo压缩SVG图片

 该任务配置的一个示例如下所示：

imagemin: {

   dist: {

      options: {

         optimizationLevel: 5

      },

      files: [{

         expand: true,

         cwd: 'src/images',

         src: ['**/*.{png,jpg,gif}'],

         dest: 'dist/'

      }]

   }

}

这个配置可以通过使用optimizationLevel选项来实现高程度的优化。这个值范围从0到7,默认为3。在这种情况下图片优化指的是对那些图片格式为png，jpg或gif，并且位于“src/images”文件夹及它的所有子文件夹的图片进行优化。优化后的图片将存储在“dist”文件夹中。

grunt-contrib-uglify

grunt-contrib-uglify任务用来压缩JavaScript文件。这个任务删除你源码中的所有不必要的空格，并且重命名变量和函数以便使用尽可能短的名字。

你将会常常使用这个任务中的一些选项是sourceMap和banner。前者在同一目录下创建一个源映射文件作为目标文件。为了启用这个选项你必须设置它为true（默认值为false）。banner是压缩输出文件的前置字符串，你通常可以在那写上你的文件或库或框架的名称、它的版本、作者名和许可。 

为了让你对压缩源有个认知，假设你拥有以下的代码： 

var MyApplication = function() {

   var data = 'hello';

   *** = function(first, second) {

      return first + second;

   } 

   ***ta = function() {

      return data;

   }

}; 

压缩过程会把上面的代码转化为以下代码： 

var MyApplication=function(){var a="hello";***=function(a,b){return a+b},***ta=function(){return a}};

这个工具的示例配置如下所示：

uglify: {

   dist: {

      options: {

         sourceMap: true,

         banner: '/*! *** 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */'

      },

      files: {

         'dest/***': ['src/***'],

      }

   }

}

grunt-contrib-cssmin

顾名思义，grunt-contrib-cssmin是用来压缩CSS文件的。跟grunt-contrib-uglify任务类似，它也提供一个banner选项。 

这个任务的一个简单配置为： 

cssmin: {

   dist: {

      options: {

         banner: '/*! *** 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */'

      },

      files: {

         'dist/css/***': ['src/css/**/*.css']

      }

  }

} 

这个例子压缩存储在”src/css”及其子文件夹的所有CSS文件，并将结果存储在一个命名为“***”的样式表中，它位于“dist/css”文件夹下。另外，这个配置在这个压缩文件的顶部增加了一个banner。

grunt-uncss

另一个处理CSS的任务是grunt-uncss。这个任务从一个项目中删除未使用的CSS，因此会减少了最终CSS文件的大小，从而提高了下载时间。如果你正在使用一个像Bootstrap或Foundation的框架开发，它是特别适合的。通过阅读官方文档，你会发现这个任务有一些重要的局限性。 

一些值得一提的不错选项是ignore，它允许我们指定的选择器列表不应该被删除，ignoreSheets允许我们忽略指定样式表。 

一个使用这个任务的例子如下所示：

uncss: {

   dist: {

      options: {

         ignore: [/js-.+/, '.special-class'],

         ignoreSheets: [/***apis/],

      },

      files: {

         'dist/css/***': ['src/***', 'src/***', 'src/***']

      }

   }

}

grunt-contrib-htmlmin 

在本文中我想讨论的最后一个Grunt任务是grunt-contrib-htmlmin，这是一个用来压缩HTML代码的任务。它不会对你的网站加速很多，因为它通常只可以为你节省几Kb内容，如果你正使用gzip压缩你的内容的话，它帮助甚至会更低。因此，如果你想要压缩你的HTML，恩……祝贺你，这意味着你的网站已经优化的相当不错啦。 

尽管如此，在处理网站性能上要遵循的哲学是每个Kb都很重要。所以，让我们看看将这个任务集成到我们的工作流的一个简单的配置： 

htmlmin: {

   dist: {

      options: {

         removeComments: true,

         collapseWhitespace: true

      },

      files: [{

         expand: true,

         cwd: 'src',

         src: '**/*.html',

         dest: 'dist/'

      }]

   }

}

上面的代码处理所有放在“src”目录及其子文件夹的页面，对这些页面中的每一个，这个任务删除了它找到的所有注释及不必要的空格。并将结果存储在“dist”目录中。

如果您想了解关于我们的更多信息，请关注南京锐盛互联网科技有限公司官网（）和我们的微信公众号。