微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

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

2015-03-04 20:25 前端大全
点击上方蓝字↑↑↑,轻松关注哦~

在之前我多次提过如今关心的主要问题是,如何实现良好的性能以及你应该如何努力实现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。我想先讨论它的原因是,图片是拖慢网站性能的主要杀手!


如果你看过HTTParchive.org上的统计,你会发现图片占了整个页面大小的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';

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”文件夹下。另外,这个配置在这个压缩文件的顶部增加了一个banner。


grunt-uncss


另一个处理CSS的任务是grunt-uncss。这个任务从一个项目中删除未使用的CSS,因此会减少了最终CSS文件的大小,从而提高了下载时间。如果你正在使用一个像Bootstrap或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,恩……祝贺你,这意味着你的网站已经优化的相当不错啦。


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


htmlmin: {

dist: {

options: {

removeComments: true,

collapseWhitespace: true

},

files: [{

expand: true,

cwd: 'src',

src: '**/*.html',

dest: 'dist/'

}]

}

}


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


结语


在本文中,我向您介绍了可以轻松提高你的网站性能的五个Grunt任务。它们很简单,你真的没有借口去不使用,不去用更快的服务提供用户更好的体验。我希望你喜欢这篇文章,并尽快应用。


你曾经用过它们么?它们提高你的网站多少性能?有没有一些其他你喜欢的任务记你想要与我们分享的呢?



原文出处:Aurelio De Rosa

译文出处:伯乐在线 - Martin



/////////////////


1. 『前端大全』分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯,欢迎关注。微信号:FrontDev

(长按二维码↑↑↑自动可扫描)

http://web.jobbole.com/all-posts/

2. 点击“阅读原文”,查看更多前端文章。


 
前端大全 更多文章 5个典型的JavaScript面试题(上) Limu:JavaScript的那些书 Web开发:我希望得到的编程学习路线图 JavaScript基础工具清单 常用排序算法之JavaScript实现
猜您喜欢 利用 Rancher 构建高可用负载均衡 详解Javascript中的Object对象 谈谈 Swift 中的 map 和 FlatMap 第二篇 - 另一层思维方式 第三届携程UED产品与设计大会开始报名 干货 ▏进入互联网行业先了解,常见互联网34个术语解释