grunt入门讲解6:grunt使用步骤和总结

Grunt是啥?

很火的前端自动化小工具,基于任务的命令行构建工具。

Grunt能帮我们干啥?

假设有这样一个场景:

编码完成后,你需要做以下工作

  1. HTML去掉注析、换行符 - HtmlMin
  2. CSS文件压缩合并 – CssMinify
  3. JS代码风格检查 – JsHint
  4. JS代码压缩 – Uglyfy
  5. image压缩 - imagemin

重复而枯燥的工作太多了,我们需要一个自动化的工作流程,让我们更专注于coding,而不是coding外的繁琐工作。于是Grunt应运而生。可以想像,如果在node环境下,一行命令就搞定了上面的所有工作,是不是节省了很多时间。

Grunt安装配置

安装 grunt-cli

1. 自备node环境(>0.8.0), npm包管理

2. 卸载旧版本grunt(<0.4.0) (没装过请忽略)

npm uninstall grunt -g

3. 安装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 //项目自动化工作流配置文件。

package.json 文件的基本内容:

Gruntfile.js 文件的基本内容:

在实际项目中的应用

1. 先配置好package.json、Gruntfile.js这两个文件,具体如何配置,请看前面的课程讲解。

2. 执行命令,自动下载依赖的Grunt插件
命令行执行:
npm install
3. 启动任务live的执行,这个任务,你可以用来监控你的源文件是否有变化。
命令行执行:
grunt live
4. 启动任务build的执行,这个任务,你可以用来合并所有的js源文件
命令行执行:
grunt build

Grunt使用总结

1. 配置简单。配置文件Gruntfile.js是JS格式的,比较贴近前端的知识点。相对Ant之类的是基于JAVA的,而且又是xml配置,相对来说学习成本低。
2. Grunt能为我们做的远不只这么多,很多Grunt插件待我们去挖掘使用。
比如:haml less coffeeScript dataURI html2json
3. 每个人的具体需求不一样,可以按自己的习惯合理配置,组合成最适合自己项目的自动化工作流。
4. Grunt团队很勤劳,社区活跃,有兴趣可以持续关注。


加油

时间: 2024-08-28 19:33:58

grunt入门讲解6:grunt使用步骤和总结的相关文章

grunt入门讲解2:如何使用 Gruntfile 配置任务

Grunt的task配置都是在 Gruntfile 中的grunt.initConfig方法中指定的.此配置主要包括以任务名称命名的属性,和其他任意数据.一旦这些代表任意数据的属性与任务所需要的属性相冲突,就将被忽略. 举个例子: grunt.initConfig({ concat: { // 这里是concat任务的配置信息. }, uglify: { // 这里是uglify任务的配置信息 }, // 任意数据. my_property: 'whatever', my_src_files:

grunt入门讲解4:如何创建task(任务)

每当运行Grunt时, 你可以为其指定一个或多个任务, 这些任务用于告诉Grunt你想要它做什么事情. 如果你没有指定一个任务,并且你已经定义一个名为 "default" 的任务,那么该任务将会默认被执行. 任务别名 如果指定了一个任务列表taskList,新任务名taskName将是这一个或多个指定任务的别名.当运行此 "任务别名" 时,在taskList 中指定的每个任务都会按照其出现的顺序依次执行.taskList参数必须是一个任务数组.grunt.regis

grunt入门讲解1:grunt的基本概念和使用

Grunt和 Grunt 插件是通过 npm 安装并管理的,npm是 Node.js 的包管理器. Grunt 0.4.x 必须配合Node.js >= 0.8.0版本使用.老版本的 Node.js 被认为是不稳定的开发版.之前,在用grunt来合并文件时,老是报错,原因是node.js的版本太低了. 在安装grunt之前,你需要先将Grunt命令行(CLI)安装到全局环境中. npm install -g grunt-cli 上述命令执行完后,grunt 命令就被加入到你的系统路径中了,以后就

grunt入门讲解7:项目脚手架grunt-init

grunt-init是一个用于自动创建项目脚手架的工具.它会基于当前工作环境和你给出的一些配置选项构建一个完整的目录结构.至于其所生成的具体文件和内容,依赖于你所选择的模版和构建过程中你对具体信息所给出的配置选项. 注意:这个独立的程序曾经是作为Grunt内置的"init"任务而存在的. 安装 为了使用grunt-init,需要将其安装到全局环境中. npm install -g grunt-init这样就会把grunt-init命令安装到你的系统路径中,从而允许你在任何目录中都可以运

grunt入门讲解5:创建插件,安装Grunt以及常见问题

创建插件 创建插件主要有以下几个步骤: (1)通过 npm install -g grunt-init 命令安装 grunt-init .(2)通过 git clone git://github.com/gruntjs/grunt-init-gruntplugin.git ~/.grunt-init/gruntplugin 命令安装grunt插件模版.(3)在一个空的目录中执行 grunt-init gruntplugin .(4)执行 npm install 命令以准备开发环境.(5)为你的插

grunt入门讲解3:实例讲解使用 Gruntfile 配置任务

这个Gruntfile 实例使用到了5个 Grunt 插件: grunt-contrib-uglify grunt-contrib-qunit grunt-contrib-concat grunt-contrib-jshint grunt-contrib-watch 上面的uglify,concat,watch这三个插件用的最多,第一个插件是用来压缩文件的,第二个插件是用来合并文件的,第三个插件用来监听文件内容的,如果文件内容改变了,就会触发回调方法进行相应的处理. 我们一步一步来讲解这个 Gr

Grunt入门教程之二 —— concat插件

Grunt入门教程之二 Concat插件 concat是grunt中用来做文件连接的常用插件,比如说你写了一个类库,有三大模块,如: a.js b.js c.js 当你的项目准备发布的时候,你可能需要将这三个模块合并成一个大的模块all.js,这样做可以减少HTTP请求,增快页面的响应速度. 如果我们每次发布的时候又要连接这三个模块,并测试all.js,确保大模块无BUG之后再发布,就显得很蛋疼了.一种好的方式是,每当你修改了其中一个小模块,他都会自动连接成all.js,并且你的项目在开发的时候

Grunt入门教程之(三)

Grunt入门教程之三 Yuidoc插件 Yuidoc 是一个可以将代码注释生成HTML格式文档的工具,文档的生成完全基于JavaDoc风格的代码注释规则. 我们在写公共模块或者API的时候,往往会输出文档给调用者查看,这时候Yuidoc就是一个很好的助手. 下面介绍一下如何在Grunt中使用Yuidoc. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 grunt.initConfig({ pkg: grunt.file.readJSON('package.jso

Grunt 入门

Grunt简介: 插件丰富,功能强大, jshint对JS文件的检测,以及js和css文件的合并,压缩,是前端自动化压缩构建项目的得力助手. 接下来就随lizimeme一起学习grunt的基本使用 我的电脑安装了nodejs ,自动全局安装了npm(npm是随同NodeJS一起安装的包管理工具) 第一步:windows系统下: npm install -g grunt-cli //全局安装 grunt-cli 第二步: 创建一个web project路径 假如在: E:\LIZIZONE\lea