yytext 行艰巨_5个可提高网站性能的艰巨任务

yytext 行艰巨

我在SitePoint上多次提到，如何获得良好的性能是当今的主要关注点，以及您应该如何争取快速的网页。 在我的一些有关JavaScript API的文章中，例如“资源定时API简介”和“ 发现用户定时API” ，我为您提供了了解使项目变慢的所有功能。 今年早些时候，克雷格·巴克勒（Craig Buckler）也用他的文章《降低页面重量的完整指南》涵盖了这个话题。

如果您不被限制在过去，则可能会使用Grunt或Gulp之类的任务运行器，通过自动化许多我们以前手动执行的操作来改善工作流程。 在本文中，我将介绍五个Grunt任务，这些任务可以帮助我们提高网页的性能。

grunt-contrib-imagemin

我要提到的第一个任务是grunt-contrib-imagemin 。 我想首先讨论它的原因是图像正在破坏网络。 认真！

如果查看HTTParchive.org统计信息，您会发现图像占页面总大小的63％以上。 出现这种膨胀的原因是，通常不会将图像压缩为具有尽可能低的权重。 grunt-contrib-imagemin是您可以用来解决此问题的任务之一。

此任务随以下优化器一起提供，以便能够压缩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”文件夹中。

咕-作tri

grunt-contrib-uglify任务用于最小化JavaScript文件。 此任务将删除源代码中所有不必要的空格，并一致地重命名变量和函数，以使用尽可能短的名称。

您将经常用于此任务的一些选项是sourceMap和banner 。 前者在与目标文件相同的目录中创建源映射文件。 要启用此选项，您必须将其设置为true （默认值为false ）。 banner是在最小化输出之前的字符串，通常在其中输入文件/库/框架的名称，其版本，您作为作者的名称以及许可证。 它的默认值是一个空字符串。

为了让您了解缩小源的外观，假设您具有以下JavaScript代码：

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'],
      }
   }
}

grunt-contrib-cssmin

顾名思义， grunt-contrib-cssmin会压缩CSS文件。 像grunt-contrib-uglify任务一样，此任务提供了banner选项。

此任务的简单配置是：

cssmin: {
   dist: {
      options: {
         banner: '/*! MyLib.js 1.0.0 | Aurelio De Rosa (@AurelioDeRosa) | MIT Licensed */'
      },
      files: {
         'dist/css/style.min.css': ['src/css/**/*.css']
      }
  }
}

本示例将“ src / css”及其子文件夹中存储的所有CSS文件缩小，并将结果存储在名为“ style.min.css”的单个样式表中，该样式表放置在文件夹“ dist / css”中。 另外，该配置在缩小文件的顶部添加了横幅。

咕unt声

处理CSS的另一个任务是grunt-uncss 。 此任务从项目中删除未使用CSS，因此减小了最终CSS文件的大小，从而缩短了下载时间。 如果您正在使用Boostrap或Foundation这样的框架进行开发，则它特别适合。 此任务有一些重要的限制，您可以在官方文档中阅读。

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

下面显示了此任务的示例用法：

uncss: {
   dist: {
      options: {
         ignore: [/js-.+/, '.special-class'],
         ignoreSheets: [/fonts.googleapis/],
      },
      files: {
         'dist/css/unused-removed.css': ['src/index.html', 'src/contact.html', 'src/service.html']
      }
   }
}

grunt-contrib-htmlmin

我要在本文中讨论的最后一个Grunt任务是grunt-contrib-htmlmin ，这是一个最小化HTML代码的任务。 它不会大大加快您的网站的速度，因为它通常仅节省几Kb，并且，如果您使用gzip压缩来提供内容，则收益会更低。 因此，如果您希望最小化HTML，那么……恭维。 这意味着您的网站已经非常优化。

免费学习PHP！

全面介绍PHP和MySQL，从而实现服务器端编程的飞跃。

原价$ 11.95 您的完全免费

免费获得这本书

但是，处理网络性能时要遵循的原则是每Kb都至关重要。 因此，让我们看一个将此任务集成到我们的工作流程中的简单配置：

htmlmin: {
   dist: {
      options: {
         removeComments: true,
         collapseWhitespace: true
      },
      files: [{
         expand: true,
         cwd: 'src',
         src: '**/*.html',
         dest: 'dist/'
      }]
   }
}

上面的代码处理放置在“ src”目录及其子文件夹中的所有页面。 对于这些页面中的每个页面，任务都会删除所有注释并折叠找到的空间，并将结果存储在“ dist”目录中。

结论

在本文中，我向您介绍了五个Grunt任务，可以轻松提高网站的性能。 它们是如此简单，以至于您没有任何借口避免使用它们，并通过更快的服务为用户提供更好的体验。 希望您喜欢本文，并尽快使用这些任务。

您曾经使用过它们吗？ 他们在多大程度上改善了您的网站？ 您有喜欢和想要与我们分享的任务吗？

翻译自: https://www.sitepoint.com/5-grunt-tasks-improve-performance-website/

yytext 行艰巨