有时候，我们就是会不由自主地写出一些低效的代码，严重影响页面运行的效率。或者我们接手的项目中，前人写出来的代码千奇百怪，比如为了一个 Canvas 特效需要同时绘制 600 个三角形，又比如 Coding.net 的任务中心需要同时 watch 上万个变量的变化等等。那么，如果我们遇到了一个比较低效的页面，应该如何去优化它呢？

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能，Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点，例如使用console和debugger在线编辑CSS。在这篇文章中，我们将分享一些很酷的技巧，让你能够更好的改进工作流程。

顾名思义Chrome开发工具就是一个工具，它允许Web开发人员可以通过浏览器应用程序干预和操作Web页面，也可以通过这个工具调试和测试Web页面或Web应用程序。有了这个工具，你可以做很多有趣的事情。

嗨，各位，又到了周末总结时间！得益于大量的 Grunt 和 Gulp 插件，我们可以轻松实现网站数据的可视化，虽然深入理解这些工具还比较困难，但分门别类的将它们列出来，也是很有帮助的。

谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能，Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点，例如使用console和debugger在线编辑CSS。在这篇文章中，我们将分享15个很酷的技巧，让你能够更好的改进工作流程。

在今天的现代化工作流程中，经过编译、压缩或者其它优化过程之后，我们在开发环境下所写的代码与最终的产品代码有着很大的不同。指出产品代码和原本代码之间确切的映射，就是source maps发挥其作用之处。在本篇入门教程中，我们将举一个简单的项目，通过在各种JavaScript编译器中运行它，找出浏览器中source maps加入为目的。

Grunt是一个任务管理器，能大大提高您运行前端开发工作流程。使用大量的Grunt插件可以自动执行任务，例如编译Sass和CoffeeScript，优化图像和验证您的JavaScript代码与JSHint。在过去你可能使用类似CodeKit或Hammer来处理这些任务。我认为这两种应用程序是伟大的(过去广泛的使用他们)，但Grunt比他们更优秀，他可以定制任务。有很多插件可以帮助你优化图片和在你的工作流中加入CSS样式。在这篇文章里你将学习如何设置Grunt和配置Compass & Sass，JSHint和CSS连接的任务。我们开始吧。

在《Grunt教程——初涉Grunt》和《Grunt教程——安装Grunt》中得知，Grunt项目中都是通过Gruntfile.js来配置任务。可以说，Gruntfile.js文件在任何一个Grunt项目中都是必不可少的，从这也可以看出这个文件的重要性。欲要搞清楚Grunt怎么工作，就必须要先了解Grunt是如何通过Gruntfile.js配置任务，帮助你实现你需要的功能。如果你还不知道Gruntfile.js是什么，建议您先阅读Grunt了解一下，如果你觉得这样麻烦，也不必过于担心，你也可以通过下面将要介绍的内容，深入的了解Gruntfile.js，并学习如何配置。

最近我一直在通过自动化任务完成在日常生活中的工作流。我也想在跨团队开发中有一套实现项目的标准化，设置一个项目结构和确保必要的正确无误的任务。CodeKit对于我来说已经很好了，但很多地方仍然有一些问题；能够更多的实现跨平台自动化而不需要为不同的应用程序配置不同的项目结构。他被叫作Grunt。这一篇关于Grunt的基础教程，而且这样的教程在站上也有多篇，我一直在重复的做这样的一件事情，想通过不同的优秀文章，实例来加深对Grunt的理解与实战。今天根据markgdyr的《Automating your workflow with Grunt》所译，和大家一起学习如何使用Grunt实现自动化工作流，减少你每天重复多次而又乏味的任务。

在上一节《Grunt教程——初涉Grunt》一文中介绍了Grunt是什么，今天我们主要一起来学习和探讨Grunt如何安装。俗话说，巧妇难为无米之炊，要想正常的使用Grunt，首要条件你要在自己的电脑环境中具备运行Grunt的环境。别的先不说了，我们切入正题。Grunt和Grunt插件应该作为项目依赖定义在你项目的package.json中。这样就允许你使用一个单独的命令:安装你项目中的所有依赖（在中定义好的Grunt和Grunt插件在使用时会自动安装相关依赖，正如我们已经了解到的，这些依赖定义在中了）。当前稳定的和开发中的Grunt版本始终都列在wiki页面上。