轩枫阁

首页 / Web前端 / 授人以渔 / Javascript / Grunt自动化的前端项目构建工具

Grunt自动化的前端项目构建工具

官网

官方英文版:http://gruntjs.com/

中文翻译版:http://www.gruntjs.org/article/home.html

背景

前端工程师需要维护的代码变得及为庞大和复杂,代码维护、打包、发布等流程也变得极为繁琐,同时浪费的时间和精力也越来越多,当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具,能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多,并且国内很多大型团队也都有自己成熟的自动化部署工具。百度有FIS, 腾讯有Modjs,360有燕尾服,还有很多团队在使用Ant,Shell等。而Grunt乐意成为目前最好的前端构建框架。

 

简介

Grunt是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。它可以更好的帮助一个团队更好的提高效率、减少错误率。它不仅仅是构建工具,实际上它只是任务运行器,管理每个子任务的自动化运行。

 

功能

Grunt就是一个工具箱,就像一个百宝箱,拥有非常丰富的任务插件,可以帮助开发人员实现各式各样的构建目标。

在Grunt工具箱中,按任务目标我们可以分为:

编译文档型:比如编译LESS、Sass、Stylus、Coffeescript等;

文件操作型:比如说合并、压缩JavaScript、CSS、图片等;

质量保障型:比如JSHint、Jasmin、Mocha等;

类库构建型:比如说Backbone.js、ember.js、angular.js等。

这些任务都依赖于给Grunt提供的插件来完成的,但很多工作依旧需要在命令终端手工输入命令来完成这些操作。为此在Grunt中可以使用watch任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。

 

目的

为了自动化。对于前端项目,为了明确模块分工,会将JavaScript、CSS代码拆解成很多个模块,每个都有独立的一个个文件。过多文件会增加Http请求,从性能的角度来考虑,不利于页面优化。所以我们需要合并这些JavaScript和CSS文件。这样一来,也期望有一种工具能代替我们手工操作,去完成这些任务。

在项目发布之前,都需要做一个步骤,那就是尽可能的将项目中的文件进行尽可能压缩,比如JavaScript、CSS、images甚至是HTML文件,主要目的是减小加载文件的带宽。另外,在很多情况为了安全性考虑,我们需要对我们项目的源代码做一些单元测试和回归测试。然而这些工作都是一些重复性的、乏味的工作。对于一个小型项目来说,或许没有太大的感觉,但对于一个大中型的项目,特别的参与人员过多的项目时,这些工作就显得更重要了。同时让大家更觉得自动化工具是多么的重要。

 

缺点

英文文档,命令行操作,新手较难上手。但是随着grunt的流行,中文文档也在逐渐增加。

 

各个构建工具的比较

Shell

优点:调用 yuicompressor、cssmin 来压缩文件,非常简单

缺点:

不能自动下载依赖的外部命令,比如 yuicompressor/cssmin

缺乏变量替换功能

难以跨平台

代码难以维护

 

Ant

优点:

内置了一些常见任务,比如文件复制、合并、变量替换等,并且可以方便的通过编写自定义任务来扩展。得益于 Java 灵活的扩展性,Ant 任务可以非常方便的在各个项目之间分享,很好的解决了 shell 脚本代码难以维护和迁移的缺点。Ant 还可以结合 ivy 自动解决依赖,实现了完全的跨平台支持。

缺点:它是 Java 写的。Ant 如果要执行 js 代码,就必须通过 rhino,速度比 nodejs 慢了不少。速度慢是明显的缺点,如果涉及的文件过多,ant可能要处理10分钟,而grunt可以再1-2分钟解决。

 

Jake

优点:得益于 nodejs,Jake 执行 js 代码压缩的速度非常快,而且开发调试也更加方便

缺点:不同项目间的 Jake 任务难以重用,项目大了以后 Jakefile 依然很难维护,面对一个上千行的 Jakefile,和面对一个几百行的 shell 脚本的感觉差不了太多。

 

好用的构建框架应该具有以下三个特点:

跨平台(Ant, Jake)

易维护、易迁移(Ant)

开发简单(Shell,Jake)

grunt 就是同时具有以上三个特点的前端构建框架。

 

grunt

grunt 是一个开源的基于任务 (Task) 的前端构建框架。它除了有 Jake 的优点(跨平台、开发简单)以外,还有一套设计良好的 task 框架用来组织各种构建任务。grunt 内置了几个非常常见的构建任务:

concat – 组合各种文件

lint – 用 JSHint 检查代码

min – 用 UglifyJS 压缩代码

qunit – 跑 QUnit 单元测试

watch – 当源代码文件发生变化时自动执行任务

除此之外还可以通过 npm 来方便的获取几百个现成的 task,比如用 closure 而不是 UglifyJS 来压缩 js,或者用 less 来生成 css,又或者用 jslint 而不是 jshint 来检查语法等,这些任务都可以在 npm 上找到。如果这些任务无法满足你的需求,grunt 还允许你方便的添加自定任务,就像写 nodejs 代码一样简单。自定任务还可以发布到 npm 上,通过 npm 在多个项目中共享这些任务。

 

教程

官网(官方英文版):http://gruntjs.com/

官网(中文翻译版):http://www.gruntjs.org/article/home.html

W3cplus教程:

初涉Grunt:http://www.w3cplus.com/tools/grunt-tutorial-start-grunt.html

安装Grunt:http://www.w3cplus.com/tools/grunt-tutorial-installing-grunt.html

使用Grunt启动和运行:http://www.w3cplus.com/tools/get-up-running-grunt.html

使用Grunt快乐编码:http://www.w3cplus.com/tools/happy-coding-using-grunt.html

 

项目构成

众多插件:包含在node_modules文件夹

依赖模块:package.json

配置文件:Gruntfile.js

288/470
290/470

相关阅读

文章评论

  • 好贴,双手赞成!

  • test

  • yu

    gulp和broccoli怎么样?

    • 这两个是什么,没听说过 – –

      • yu

        也是前端构建工具

        • 现在一直在用grunt,挺多人用,而且很好用

  • […] 答案移至上一篇文章,Grunt自动化的前端项目构建工具:http://www.xuanfengge.com/grunt-front-end-project-build-automation-tools.html […]

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子