自动化任务运行器 Grunt 迅速上手

这篇文章将带领你用Grunt来提速和优化网站开发的流程。首先我们会简短介绍Grunt的功能,然后我们直接上手,介绍如何用Grunt的不同插件来替你完成网站项目开发中的很多繁冗工作。

接着我们会创建一个简单的input验器,用 Sass 来完成CSS预处理,我们会学习如何用grunt-cssc CssMin来合并和压缩CSS,如何用 HTMLHint 来保证我们的HTML正确无误,以及如何实现在运行时部署和压缩我们的文件。最后,我们会学习如何用UglifyJS 来极简化我们的JavaScript以尽可能地节约带宽。

grund-js-opt

Grunt.js 是一个JavaScript 务运行工具,它能替你完成重复性的任务,如极简化、 编译、单元测试和linting

Grunt

过去几年JavaScript发展速度令人震惊,不管是像Backbone.jsEmber.js这样的开发框架,还是JS Bin这样的开发社区,这个语言的发展都不仅改变了我们作为用户对网站的体验,还改变了我们作为开发者对网站的开发方式。

使用JavaScript,你往往需要定期去执行一系列的任务, 在大部分项目里人们可能对此已习以为常了,但它们仍然是重复的、浪费时间的活计。身处一个如此活跃的开发社区,你大概已经猜到,有现成的工具可以帮你自动化和加速完成这些任务了——这就是Grunt的用武之地。

Grunt 是什么?

Grunt基于Node.js之上,是一个以任务处理为基础的命令行工具,可以减少优化开发版本为发布版本所需的人力和时间,从而加速开发流程。它的工作原理是把这些工作整合为不同的任务,在你开发时自动执行。基本上,你可以让Grunt完成任何让你厌烦的任务:那些你需要重复进行的手工设置和运行发布的任务。

早期版本的Grunt带JSHintUglifyplugin,最新的版本(version 0.4则完全依赖用户指定plugin来运行任务。到底有哪些任务可以运行呢?这个单子可是长得很,可以说,Grunt能干任何你扔给它的活,从极简化(minifying) 到合并JavaScript concatenating)它还可以完成一些跟JavaScript关的任务,比如从LESSSass编译CSS。我们甚至还用过它跟 blink(1) 来做编译失败的提醒。

为什么要用Grunt ?

Grunt最大的优势之一是给团队带来一致性。如果你和别人一起工作过,你肯定知道代码风格的不一样有多让人伤神。Grunt让团队使用一套统一的命令,从而保证每个人写的代码符合统一标准。说到底,如果因为团队中几个人代码风格的微小不同而导致编译失败,那可是最烦人的事了。

Grunt还有一个极其活跃的开发者社区,定期发布新的plugin。使用Grunt门槛也相对较低,因为很多工具和自动化任务都是直接可用的。

设置安装

要使用Grunt,第一件事是安装Node.js。(即使你没用过Node.js也不用担心——你只需安装它让Grunt能运行。)

安装了Node.js之后,用命令行工具执行以下命令:

要确认Grunt是否正确安装,可以使用以下命令:

下一步是在你的项目的根目录下创建package.jsongruntfile.js两个文件。

创建package.json文件

这个JSON文件让我们指定我们的开发环境所依赖的必须模块。有了它,项目的所有开发者都能保证安装上一致的必须模块,从而保证所有人拥有一样的开发环境。

在项目根目录下的pacakge.json文件中写上:

然后在命令行工具运行:

该命令告诉npm 需要安装的必须模块,npm会安装它们,自动保存在项目根目录下一个叫做 node_modules 的文件夹里。

创建gruntfile.js文件

gruntfile.js 文件本质上就是一个wrapper函数,接受grunt为参数:

现在你已经可以在项目根目录下运行grunt命令行工具了。

这里我们只指定了Grunt为必须模块,还没定义任何任务。接下来我们就要指定任务和必须模块。首先来看如何拓展package.json文件。

拓展package.json文件

使用Node.js最好的一点,就是它可以根据package.json文件的内容,一次性查找和安装多个package。要安装我们项目的所有必须任务,只须在package.json文件中加上以下内容:

那么如何实现安装?你肯定已经猜到了:

使用Grunt载入任务

package安装好后,还必须被Grunt载入才能为我们所用。使用 matchdep,我们用一行代码就可以自动载入所有任务。这是开发流程的一大优化,因为现在我们只须把必须任务列表写在package.json一个文件里,便于管理。

gruntfile.js里,grunt.initConfig之上,写上以下代码:

要是没有matchdep,我们就必须为每一个必须任务写一次grunt.loadNpmTasks(“grunt-task-name”); ,随着我们使用的任务的增加,这些载入任务的代码很快就会变得相当繁冗。在Grunt载入这些任务前,我们还可以指定设置选项。

现在我们需要创建我们的HTML文件(index.html):

HTMLHint验证HTML

grunt.initConfig里加入下列设置代码:

一般来说,一个plugin设置方法如下:plugin的名称(去掉grunt-contrib-grunt-缀),选择使用此plugin的一个或多个对象(在这里可以给不同文件设置此plugin 的不同选项),一个选项object,以及plugin要作用的对象。现在,如果我们用命令行工具运行grunt htmlhint该plugin就会检查我们在src里指定的HTML文件,验证其中有没有错误!但是每个小时都要手动运行几次这个任务,很快就让人觉得很繁琐了。

自动化任务运行

watch是一个特殊的任务,它可以在目标文件保存时自动触发一系列任务的运行。在grunt.initConfig里加入以下设置:

然后,在命令行工具中运行grunt watch命令。现在,你可以试试在index.html里加一行注释,保存文件。你会注意到,保存文件时会自动触发HTML验证!这是对开发流程的一大优化:在你写代码时,watch务就会默默同时为你验证代码,如果验证失败任务就会报告失败(它还会告诉你问题在哪)。

注意grunt watch务会一直运行,直到命令行工具关闭,或手动停止(control+c在Mac)。

保持JavaScript

让我们来写一个验证用户输入的名字的JavaScript文件。简便起见,我们这里只检查其中是否含有非字母的字符。我们的JavaScript会使用strict模式,这可以防止我们写可用但低质量的JavaScript创建assets/js/base.js文件并在其中写上:

让我们用UglifyJS来极简化这个源代码,在grunt.initConfig中加上以下设置:

UglifyJS会替换所有的变量和函数名,剔除所有空白和注释,从而生成占据最小空间的JavaScript文件,对发布非常有用。同样地,我们需要设置一个watch务来使用它,在watch设置里加入以下代码:

Sass源文件生成CSS

Sass对CSS关工作非常有用,特别是在团队中。使用Sass可以大量减少代码量,因为Sass可通过变量、mixin函数生成CSS码。Sass的具体使用方法并不在本教程探讨的范围内,所以如果你还不想使用Sass这样的CSS预处理器,可以跳过这一段。但我们这里会介绍一个很简单的用例,使用变量、一个mixin函数和SassCSS语法(SCSS)。

GruntSass plugin需要使用Sass gem为此你需要安装RubyOS X中已经预装了Ruby)。用以下命令你可以测试系统中是否已安装Ruby

使用以下命令安装Sass gem

根据系统设置的不同,你可能需要用sudo来运行此命令——即sudo gem install sass——这里你会被要求输入管理者密码。安装好Sass,在assets文件夹里创建sass文件夹,并在其中创建文件master.sass,然后写上:

你会注意到SCSS比起普通的Sass更像CSS这个样式表使用了Sass的两个特性:mixin变量。一个mixin根据给它的参数生成CSS码块,很像函数。而一个变量可以用来定义一段CSS码片段,然后在很多地方重用。变量对定义Hex颜色尤其有用,我们可以用它建立一个色表,然后在尝试不同设计时,只须修改一处代码,从而大大提高了效率。这里的mixin则用来给CSS3apperancetransition等属性生成前缀,减少了冗余代码。编写一个很长的样式表文件时,任何减少代码量的方法,都会让团队中日后更新此样式表的人受益。

Sass之外,grunt-cssc务可以整合CSS文件中定义的样式规则,最大限度削减所生成的CSS文件中的重复内容。在中到大型项目中经常出现重复的样式规则,使用这个任务就很有益处。但是,由此生成的CSS文件也不一定就是最简的,所以我们还需要使用cssmin务,它既能剔除所有空白,还能把颜色值替换为可能的最简形式(比如white会被替换为#fff)。gruntfile.js中加入如下内容:

现在我们设置好了处理样式表的任务,还要让它们自动运行。Grunt动创建了build文件夹来存放所有的发布用scriptCSS和(如果这是一个完整的网站项目的话)压缩后的图片文件。这意味着assets文件夹里可以包含为开发而做的详细的注释文件甚至说明文档,而build文件夹里则只会包含极简化代码和优化压缩过的图像文件。

我们给CSS关的工作定义一套新的任务,在gruntfile.js里的default task下面加上以下内容:

现在,运行grunt buildcss务就会按顺序运行所有CSS关的任务,比起分别运行grunt sassgrunt cssc然后grunt cssmin来,这样简洁多了。最后我们需要做的就是更新watch务的设置,让这些CSS关任务也能自动运行:

这个路径可能看起来有点奇怪,它的用途是递归地遍历我们assets/sass文件夹里的所有文件和子文件夹,来查找.scss文件。如此一来,我们就可以创建任意多的.scss文件,而不需要在gruntfile.js里添加它们的路径。现在,你的gruntfile.js应该是下面这样:

现在我们有了一个静态HTML页面,一个存放SassJavaScript源文件的assets文件夹,一个存放优化后的CSSJavaScriptbuild文件夹,以及package.json文件和gruntfile.js文件。

至此你已经有了一个不错的基础来进一步探索Grunt。像之前提到的,一个非常活跃的开发者社区在为Grunt开发前端plugin我建议你现在就到plugin library 去看看那300个以上的plugin

2 收藏 1 评论

关于作者:兔米酱

飘在德国的前端攻城女狮子!(新浪微博:@兔八百) 个人主页 · 我的文章 · 2

相关文章

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部