tools

开始使用Grunt

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

Grunt教程——Gurnt任务的配置

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

使用Grunt实现自动化工作流

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

Grunt教程——安装Grunt

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

使用Grunt快乐编码

在平常的工作之中,我们都不断的在重复着做相同的事情,比如说将Sass编译成CSS,检测JavaScript语法,压缩CSS、JavaScript。特别在团队合作开发中,常常会为了各自的习惯而不断的发生麻烦,给开发带来极大的不便。而且前端开发人员在周而复始的做这些相同的,乏味的事情。很多时候我们想工作变得更有意义,更能专注于开发,就希望有一种工具能让我们不去做这些重复而乏味的工作。这就有了Grunt,而这个Grunt让我们编码变得更意义,更开心。

Grunt教程——初涉Grunt

前端自动化,这样的一个名词听起来非常的有吸引力,向往力。当今时代,前端工程师需要维护的代码变得及为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。据我所知,百度有FIS,腾讯有Modjs,360有燕尾服,还有很多团队在使用Ant,Shell等,而现在讨论较多的是Grunt。出于对这方面的兴趣爱好,我也开始加入Grunt的使用大军,也开始在学习并尝试使用Grunt。那么从今天开始,我和大家将一起学习和使用Grunt。

使用Grunt启动和运行

在本文中,我们将探讨如何使用Grunt在项目和你的网站更快。我们将简要的分析一下Grunt可以做什么,如何设置和使用各种插件来做举世瞩目的项目。我们将看看如何构建一个简单的表单验证器,使用Sass预处理器,如何使用和CssMin结合压缩我们的CSS,如何使用HTMLHint确保我们的HTML书写正确,如何在构建我们的压缩资产,也会看看使用UglifyJS减小我们JavaScript的大小和确保我们的网站使用尽可能的少的带宽。

利于网页设计师的强大工作流程小窍门、工具和技巧

设计和开发的工作是比较花耗时间的,尤其当该工程遇到一个新的挑战时,都把整个团队或者自由开发者陷进一个未知的领域。而且,时间是生产力的一个关键因素。有效地工作会提高我们工作竞争力,自我增值。

然而,对每个工程来说,有一些操作步骤是重复的。为了拥有自由、空间去尝试新的解决方案,我们应该知道有一些操作步骤可以尽可能更快地完成。Spy根据的《Powerful Workflow Tips, Tools And Tricks For Web Designers》所译,主要围绕“工具”、“小窍门和技巧”,将使得你的标准工作流程尽可能地使用得更快,因此你可以为工作中那令人激动的部分腾出更多的时间。

SASS界面编译工具——Koala的使用

SASS界面编译工具——Codekit的使用》一文中图解了"CodeKit"图形工具编译SASS项目。由于CodeKit是一款付费工具,而且只能在Mac中使用,因此国内众多SASS爱好者,或者初学者也就无法体验CodeKit工具编译SASS项目。幸运的是,有一款国产图形工具KoalaCodeKit功能极其类似,支持多个平台,而且是开源的。

SASS界面编译工具——Codekit的使用

在《SASS编译》和《Nodejs+Grunt配置SASS项目自动编译》教程中,我们详细介绍了使用和使用命令完成SASS项目的转译任务,其中还可以使用和命令实现时时监控SASS项目,一旦修改任何SASS文件,都会自动将SASS文件转译成CSS。

当然,我们可以通过系统自带的命令行或者其他的终端命令工具,实现SASS的编译工作,但对于前端设计人员而言,虽然常用能记得住这些命令,终究会觉得不习惯。为此,我们可以使用APP应用来帮助我们完成SASS编译工作,从此告别使用命令来转译SASS。

目前为止,有关于SASS编译的界面工具数不胜数,例如:ScoutCodeKitLiveReloadCompassFire以及国产的编译工具Koala等。其中前几款都是付费工具,唯有Koala是免费的。

孰好孰坏,我们不做过多的评论与对比。从我个人出发,我更趋向于CodeKitCompassKoala。由于Compass无法获取到破解版本,同时CodeKit与之无太多区别,所以在我的Mac系统中,我安装了CodeKit。今天特意和大家一起分享一下使用CodeKit的一点经验。

 

页面

返回顶部