Grunt是什么
Grunt是一个基于JavaScript上的一个很强大的任务管理器(task runner),或许这么一说让很多人觉得费解,简单来说就是你可以在你的终端机上,用JavaScript去执行一些程序来完成一些任务。比如说验证HTML、CSS、JavaScript的语法,压缩CSS、JavaScript、图像,Sass、LESS和Stylus编译成CSS等等,这些东西佛教徒吧很适合用Grunt来解决。
Grunt其实就是一个基于NodeJS,可用于自动化构建、测试、生成文档的项目管理工具。他可以更好的帮助一个团队更好的提高效率、减少错误率。
简单点来说,Grunt不仅仅是构建工具,实际上他只是任务运行器,管理每个子任务的自动化运行,我们还能使用他做更多东西。
为什么要用Grunt
或许有很多要都像我一样,会问“为什么要用Grunt”?其实用一句话可以概括出来:为了自动化。对于前端项目,为了明确模块分工,我们可以会将JavaScript、CSS代码拆解成很多个模块,他们都有独立的一个个文件,但这样一来用来页面上,增加了文件个数,同时也产生过多的Http请求,可从性能的角度来考虑,不利于页面优化。所以我们需要合并这些JavaScript和CSS文件。这样一来,也期望有一种工具能代替我们手工操作,去完成这些任务。
大家都非常清楚,在项目发布之前,我们都需要做一个步骤,那就是尽可能的将项目中的文件进行尽可能压缩,比如JavaScript、CSS、images甚至是HTML文件,主要目的是减小加载文件的带宽。另外,在很多情况为了安全性考虑,我们需要对我们项目的源代码做一些单元测试和回归测试。然而这些工作都是一些重复性的、乏味的工作。对于一个小型项目来说,或许没有太大的感觉,但对于一个大中型的项目,特别的参与人员过多的项目时,这些工作就显得更重要了。同时让大家更觉得自动化工具是多么的重要。
Grunt能做什么
Grunt就是一个工具箱,就像一个百宝箱,拥有非常丰富的任务插件,可以帮助开发人员实现各式各样的构建目标。
在Grunt工具箱中,按任务目标我们可以分为:
编译文档型:比如编译LESS、Sass、Stylus、Coffeescript等;
文件操作型:比如说合并、压缩JavaScript、CSS、图片等;
质量保障型:比如JSHint、Jasmin、Mocha等;
类库构建型:比如说Backbone.js、ember.js、angular.js等。
这些任务都依赖于给Grunt提供的插件来完成的,但很多工作依旧需要在命令终端手工输入命令来完成这些操作。为此在Grunt中可以使用watch任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。
- 浏览: 109147 次
- 性别:
- 来自: 天津
文章分类
最新评论
发表评论
-
腾讯全端 AlloyTeam 团队 Blog 地址
2016-04-22 12:42 676腾讯全端 AlloyTeam 团队 Blog http:/ ... -
转 浅谈浏览器http的缓存机制
2016-04-22 12:39 595原文:http://www.cnblogs.com/vajo ... -
转 谈谈HTTP协议中的短轮询、长轮询、长连接和短连接
2016-04-22 12:05 462原文:http://web.jobbole.co ... -
cookie和session的区别
2016-02-21 18:56 338http://blog.csdn.net/fangaoxin ... -
转 浏览器缓存知识小结及应用
2016-02-06 09:53 583作者:流云诸葛 出处 ... -
自己对前端的一些总结
2016-02-04 08:45 513前端一些框架当前比 ... -
现代浏览器的工作原理
2016-02-03 09:03 403原文http://blog.jobbole.com/127 ... -
转 最佳的 JavaScript 前端框架、库和工具
2016-01-28 09:50 570原文http://web.jobbole.com/8464 ... -
web应用上线之前应该了解的技术细节
2016-01-27 09:40 638原文http://blog.jobbole.com/8678 ... -
HTTP协议简介
2016-01-27 09:36 568原文:http://blog.jobbole.c ... -
转 如何挑选适合的前端框架?
2016-01-29 09:18 564摘要:前端框架不断 ... -
转 Web应用组件化的权衡
2016-01-24 14:43 624原文https://github.com/ ... -
前端性能优化-资源预加载
2016-01-24 14:38 480原文 http://web.jobbole.com/84256 ... -
转 快速提升前端性能
2016-01-24 14:31 692原文:http://web.jobbole.com/835 ... -
转 前端工程与性能优化
2016-01-24 14:29 520原文:http://fex.baidu.com/blog/2 ... -
转 URL详解与URL编码
2016-01-29 09:17 772作为前端,每日与 URL 打交道是必不可少的。但是 ... -
JS开发者常用的10个Sublime Text插件
2016-01-22 20:52 964原文http://web.jobbole.com/8 ... -
jQuery 小技巧
2016-01-22 20:42 431原文http://web.jobbole.com/84028 ... -
从输入 URL 到页面加载完成的过程中都发生了什么事情?
2016-01-22 20:38 461原文 http://fex.baidu.com/blo ... -
10 个 CSS3 代码生成工具
2016-01-22 20:32 746英文:Jake Rocheleau 英文地址:h ...
相关推荐
grunt运行的命令行 放在C:\Users\Administrator\AppData\Roaming\npm\node_modules\grunt-cli下的
grunt.js cookbook
简述关于Grunt依赖node的安装使用和功能
grunt-cli的0.1.13版本压缩包,里面带有node_modules等目录。供有需要的人使用。
Grunt的实例代码(快速理解Grunt的用法)(内含代码注释)
简单的grunt练习, 看看grunt-contact 模块是怎么使用的. 注意要在C:\Users\Administrator\AppData\Roaming\npm目录放一个grunt-cli
Grunt是基于Node.js的项目构建工具。它可以自动运行你所设定的任务。Grunt拥有数量庞大的插件,几乎任何你所要做的事情都可以用Grunt实现。
这是我按《用grunt搭建自动化的web前端开发环境-完整教程》写的Demo。
Grunt 离线安装包,包括所有依赖,上传上来看能用不。
grunt-cli, Grunt接口命令 grunt Grunt 命令行 接口。全局安装,你就可以在系统的任何位置访问 grunt 命令。npm install -g grunt-cli注意:命令的工作是加载并运行你在本地安装的Grunt版本,不管它的版本
Grunt的使用demo,包含4个插件:jshint, watch, uglify, concat
grunt工具实现前端代码检测,JS文件压缩合并等.
time-grunt, 显示grunt任务的执行执行时间 时间 grunt 显示 grunt任务的经过执行时间 安装$ npm install --save-dev time-grunt用法// Gruntfile.jsmodule.exports =
使用grunt-babel 转换es6 到es5依赖库
grunt项目构建样例,实现js文件css文件等的压缩和合并
包括Grunt软件的安装、使用方法以及nodejs安装和使用,下载本资源,不需要下载额外的资源,就可以完成Javascript功能
grunt-wordpress, 用于将内容发布到WordPress的Grunt插件 grunt使用 WordPress 发布内容到WordPress的Grunt插件。支持这里项目通过捐赠在Gratipay上。正在启动Grunt的wordpress就像任何其他的插件插件一样工作。 ...
grunt-wp-boilerplate, WordPress插件模板的Grunt初始化模板 grunt-wp-boilerplate在插件的基础上创建一个WordPress插件,基于 WordPress插件的模板。安装如果你还没有这样做,请安装 grunt-init:npm install -g ...
grunt-ssh, SSH,Grunt的SFTP任务 新主人 启动 12 -23-2015,我正站在两个巨人( @chuckmo和 @andrewrjones) 作为这个项目维护者的肩膀上) 。 欢迎捐赠,如往常。 ( 这里消息也将在下一次发布时删除) 。静音 ssh
grunt-1.4.1.tar.gz