前端开发入门:前端开发环境构建工具Grunt
2015-12-30 23:08
495 查看
Grunt这么鬼,是干啥的呢?
最近很火的前端自动化小工具,基于任务的命令行构建工具。官网http://gruntjs.com中文网http://www.gruntjs.net/ 通过官网和中文网,我们清楚了Grunt 是一个基于任务的JavaScript工程命令行构建工具。
jQuery在使用grunt,bootstrap在使用grunt,百度UEditor在使用grunt,你没有理由不学、不用!
我们知道grunt是一套前端自动化工具,一个基于nodeJs的命令行工具,一般用于:① 压缩文件;② 合并文件;③ 简单语法检查。
Grunt是一个自动化的项目构建工具。如果你需要重复的执行像压缩,编译,单元测试,代码检查以及打包发布的任务。那么你可以使用Grunt来处理这些任务,你所需要做的只是配置好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任务来实现一些监听文件改变、自动触发构建等功能。从而减少人工去每次操作任务。
Grunt帮我们干啥?
在开始介绍前,先向大家描述下面的场景:
【场景1:项目开始前】
先建立一个 projA 的文件夹 再建 html css js images (建5个或以上文件夹,花费1分钟)拷贝 CSS库(Yui Reset | bootstrap)JS库(Requiet.js | Seajs | jQuery | jQuery插件 ) 进相应目录(拷贝 N个文件,花费N分钟)
再新建 html/index.html js/comm.js css/base.css css/comm.css css/module-A.css …… (建N个文件,花费N分钟)
【场景2:编码中】
编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 => 编辑器编码 => 切换到浏览器F5 …………键盘就这样杯具了….
【场景3:编码完成】
HTML去掉注析、换行符 - HtmlMinCSS文件压缩合并 – CssMinify
JS代码风格检查 – JsHint
JS代码压缩 – Uglyfy
image压缩 - imagemin
在一个项目过程中,重复而枯燥的工作太多了…. 绳命就这样浪费了。
我们需要一个自动化的工作流程,让我们更专注于coding,而不是coding外的繁琐工作。于是Grunt应运而生。可以想像,如果在node环境下,一行命令搞定一个场景,So Cool…
Grunt安装配置
安装 grunt-cli
1. 自备node环境(>0.8.0), npm包管理2. 卸载旧版本grunt(<0.4.0) (没装过请忽略)
npm uninstall grunt -g
安装grunt-cli
npm install grunt-cli -g
安装 grunt-init(可选)
npm install grunt-init -g
可选安装,grunt-init是个脚手架工具,它可以帮你完成项目的自动化创建,包括项目的目录结构,每个目录里的文件等。具体情况要看你运行grunt-init指定的模板,以及创建过程中你对问题的回答。由于篇幅且配置 grunt-init 模板较为复杂,本章暂不展开讨论,有兴趣的童鞋可私下了解。
配置 grunt
从官网下载package.json Gruntfile.js 文件放到项目根目录,并对文件进行修改配置.package.json//项目自动化所依赖的相关插件。
Gruntfile.js//项目自动化工作流配置文件,重要
1. package.json 文件修改
官方文件地址
2. Gruntfile.js 文件修改
官方文件地址
如何开始使用Grunt
Grunt 和 Gruntplugins(grunt 插件) 都是通过npm(https://npmjs.org/)来管理和安装,npm是一个node.js(http://nodejs.org/)的包管理工具。本教程是为 Grunt 0.4.x 版本编写的,但是也适用于 0.3.x版本。唯一要注意的是,对于 Grunt 0.3.x 版本,插件名和任务的配置选项可能和本教程中的描述有出入。
Grunt 0.4.x 需要安装 node.js ,并且版本 >= 0.8.0。
1.1 安装 Grunt
如果你在之前安装过全局的 Grunt,那么先删除它。[plain]
view plaincopy
npm uninstall -g grunt
在开始使用 Grunt 之前,你必须先安装一个全局的Grunt命令行接口(CLI)。如果是在OSX、BSD等*nix机器上,你可能需要sudo来运行;如果是在windows上,可能需要管理员权限。
[plain]
view plaincopy
npm install -g grunt-cli
上面这条命令会把 grunt 加入你的系统搜索路径中,所以在任何目录下都可以使用此命令。
需要注意的是,安装 grunt-cli 并不是安装了grunt任务运行器!grunt-cli的任务非常简单:就是运行安装在GruntFile 同目录下的grunt(这里说的grunt是指通过npm安装的一个nodejs包,译者注)。
这样可以允许在同一台机器上运行多个grunt实例。
1.2 CLI 是如何工作的
每当 grunt 命令被执行时,它会通过nodejs的 require 命令在本地寻找已经安装的grunt。正因为如此,你可以在任何子目录下运行grunt 命令。如果 cli 找到了一个本地安装的grunt,它会加载这个 grunt 库,然后应用你在 GruntFile 中写好的配置, 然后执行相应的任务。
具体是怎么工作的,可读这段代码 https://github.com/gruntjs/grunt-cli/blob/master/bin/grunt
1.3 如何使用一个已经配置好的 grunt 项目
假设 Grunt CLI 已经安装好了,并且项目通过 package.json 和GruntFile这两个文件已经正确配置好了。那么非常简单就可以使用 grunt:进到项目的根目录。
运行 npm install 来安装需要的软件包。
运行 grunt 命令
这就是你需要做的全部事情。
运行 grunt --help 命令可以列出全部的grunt任务,但是最好还是先看下项目文档。
1.4 创建一个新的 grunt 项目
一个典型的安装过程只需要增加两个文件: package.json 和 GruntFile。package.json: 这个文件是npm用来储存发布这个项目所需要的元数据。你需要把 grunt 和相关的 grunt插件都列在这个文件中。
GruntFile:这个文件命名是 GruntFile.js 或者 GruntFile.coffee, 是用来配置或者定义grunt任务并且加载grunt插件用的。
在0.3.x的版本中这个文件命名是 grunt.js。
1.5 package.json 文件
package.json 文件和 GruntFile 文件一样都位于项目的根目录下,都应该加入你的版本控制中。在 package.json 文件所在目录下运行npm install命令可以自动安装此文件中所列出的所有依赖包的正确版本。有以下几种方式可以创建一个 package.json 文件:
大部分的 grunt-init (http://gruntjs.com/project-scaffolding) 模板会自动创建一个与此项目相关的 package.json 文件
npm init 命令会自动创建一个基本的 package.json 文件
用下面这个例子作为开始,然后在添加自己需要的配置,可以参考这里(https://npmjs.org/doc/json.html)
[javascript]
view plaincopy
{
"name": "my-project-name",
"version": "0.1.0",
"devDependencies": {
"grunt": "~0.4.1",
"grunt-contrib-jshint": "~0.1.1",
"grunt-contrib-nodeunit": "~0.1.2"
}
}
1.6 安装 Grunt 和 grunt插件
把grunt和grunt插件加入一个已经存在的package.json 文件最简单的方式就是使用 npm install <module> --save-dev命令。这个命令不仅会在本地安装 <module>,而且会使用tilde version range(https://npmjs.org/doc/json.html#Tilde-Version-Ranges)自动把它加入到依赖关系中。比如下面这个例子,会安装最新版本的grunt到你的项目下,并且会把它加到依赖关系中。
npm install grunt --save-dev
安装grunt插件和其他的nodejs插件都可以使用同样的方法。注意把更新后的 package.json 文件也提交到你的项目中。
1.7 GruntFile 文件
GruntFile.js 或者 GruntFile.coffee 都是合法的文件,它们需要和 package.json 文件一样被存储在项目根目录下并且提交到你的项目代码中。在 grunt 0.3.x 版本中,这个文件命名是 grunt.js.
GruntFile 文件由如下几部分组成:
wrapper function(包装函数)
项目和任务配置
加载grunt插件和任务
定制任务
Grunt使用总结
1. 配置简单,配置文件Gruntfile.js是JS格式,比较贴近前端知识点。相对Ant之类基于JAVA,又是xml配置,相对来说学习成本低。2. Grunt能为我们做的远不只这么多,很多Grunt插件待我们去挖掘使用。
比如:haml less coffeeScript dataURI html2json
3. 每个人的具体需求不一样,可以按自己的习惯合理配置,组合成最适合自己的自动化工作流。
4. Grunt团队很勤劳,社区活跃,有兴趣可以持续关注。
相关文章推荐
- JS生成二维码(兼容各种浏览器及中文)
- js中关于导航切换效果-之二(使用定时器自动切换)
- CSS之Flexbox布局
- layer.js
- html文件查看器2
- js中关于导航切换效果-之一(鼠标移动)
- 2015/12/30--jquery.html
- html文件查看器
- js中 关于复选框的多选和反选
- jquery的height()和javascript的height总结,js获取屏幕高度
- js关于省市的二级下拉菜单联动
- 怎样使用jsp实现header和footer与网页内容的分离
- jsp:include怎么设置才能正确显示包含的页面呢
- JavaScript的闭包
- nodejs的某些api~(四)udp&dns
- css媒体查询之device-width
- 使用curl查看网页源码/自动跳转/显示头信息/显示通信过程/发送表单信息/文件上传/Referer字段/User Agent
- 实现ListView图文混排 —— 获取Json数据
- JavaScript高级程序设计:第五章
- css媒体查询之height